edit website

docs/deploy.md

@@ -1,7 +1,29 @@
+So far, we only build a local site, meaning that only you can see your website in your browser. To make our website public, we need to deploy it. For this, we are going to use the continuous deployment service of GitHub Pages. You can find background information on what deployment means and continuous deployment on GitHub in these [Google Slides]. 
+
 ##### Task 1
 
+If you haven't done already, initialize Git in your local repository:
+```bash
+cd my-website-folder
+git init
+```
+##### Task 2 
+
+Go to your profile on GitHub and set up a new repository for your website:
+
+- Click on "New"
+- Give your repository a name, click "public"(1), and make sure that you **don't** add a README.md (for now)
+{ .annotate }
+
+    1.  The repository has to be public, otherwise you can't use the deployment service of GitHub pages.
+
+- Follow the instructions given by GitHub on how to push your local repository to GitHub
+
+##### Task 3
+
 Deploy your website with GitHub Pages.
 
 The developers of Material for Mkdocs wrote a very good documentation about how to deploy your website on GitHub. Thus, I won't add anything to this but redirect you to the section [Publishing your site] on their website. 
 
-[Publishing your site]: https://squidfunk.github.io/mkdocs-material/publishing-your-site/
+[Publishing your site]: https://squidfunk.github.io/mkdocs-material/publishing-your-site/
+[Google Slides]: https://docs.google.com/presentation/d/16Rgdn_-uqjZVwmeyDhGL41vKMRCFA0dSom2IpreZ59I/edit?usp=sharing

docs/extras.md

@@ -77,7 +77,7 @@ Here's a short overview what you can do:
 You can make annotations (1) to your text. Even with emojis (**Extra task**)
 { .annotate }
 
-1. I'm an annotation! I can contain `code`, __formatted
+1.  I'm an annotation! I can contain `code`, __formatted
     text__, images, ... basically anything that can be expressed in Markdown.
 
 [You can make a button](#){ .md-button .md-button--primary }    
@@ -101,6 +101,10 @@ Highlighting:
 
 **...and much more! Try everything out!**
 
+##### Task 4
+
+Go to the [setup page] by Material for Mkdocs and find out about more customizations (e.g., page headers and the footer).
+
 
 ## Blog
 
@@ -110,7 +114,7 @@ nav:
 - Home: index.md
 - About: about.md
 - CV: cv.md
-- 'Blog':
+- Blog:
   - Topic 1: Topic1.md
   - Topic 2: Topic2.md
   - Topic 3: Topic3.md
@@ -119,10 +123,28 @@ nav:
 
 However, this will become a bit chaotic and unclear over time, depending on how many blog entries you want to make. Thus, I recommend looking into the Blog-Plugin to make your blog look more professional. 
 
+## License
+
+You should think about adding a [license] to your website. You can either display the license as an [extra tab] or include it in the copyright section, like so:
+```yaml
+site_name: Workshop Web-Design for Scientists
+copyright: <a href="https://choosealicense.com/licenses/mit/">License</a>
+  &copy; 2023 Julia-Katharina Pfarr<br>
+``` 
+
+## Imprint
+
+In the same way you can add a license to your copyright footer, you could add an imprint. This is **not necessary** for a non-commercial personal website but only for commercial websites. 
 
+## Privacy Policy
 
+If you set up your website in a way that you collect private data (e.g., newsletter or blog subscriptions), you will need a [Privacy Policy]. You can include this in the copyright footer as well, just as the license above. 
 
 [Material for Mkdocs]: https://squidfunk.github.io/mkdocs-material/reference/
 [^1]: I am a footnote.
+[setup page]: https://squidfunk.github.io/mkdocs-material/setup/
 [example Blog]: https://squidfunk.github.io/mkdocs-material/blog/
-[Blog-Plugin]: https://squidfunk.github.io/mkdocs-material/plugins/blog/
+[Blog-Plugin]: https://squidfunk.github.io/mkdocs-material/plugins/blog/
+[license]: https://creativecommons.org/
+[extra tab]: https://squidfunk.github.io/mkdocs-material/license/
+[Privacy Policy]: https://www.termsfeed.com/blog/privacy-policy-personal-websites/

docs/index.md

@@ -1,5 +1,31 @@
 ---
-template: overrides/home.html
-title: Welcome to this workshop!
+hide:
+  - navigation
 ---
 
+# Web-Design for Scientists
+
+## A workshop for easy and fast website generation using mkdocs.
+
+More and more scientists make use of easy static website generation to introduce themselves and their work to the broad public, potential future employers or funding sources.
+
+![Image title](assets/images/landing.png){ align=right width="600"}
+
+During the workshop we will set up our own website using [Material for MkDocs] and [GitHub Pages].[^1]
+
+After going through this workshop you'll have a first draft of your website and the skills to develop the website further on your own.
+
+[Get started](https://julia-pfarr.github.io/workshop_webdesign/installing/){ .md-button }
+
+Find additional background information on web design, the utilized tools in this workshop and CI on GitHub in these 
+
+[Google Slides](https://docs.google.com/presentation/d/16Rgdn_-uqjZVwmeyDhGL41vKMRCFA0dSom2IpreZ59I/edit?usp=sharing){ .md-button .md-button--primary }
+
+
+
+<br><br>
+[^1]: This website contains instructions on how to create a personal website using Material for MkDocs and is thus heavily based on the documentation pages for MkDocs, Material for MkDocs, and GitHub Pages. I want to thank the developers for making their software and documentation freely available for everyone.
+[^2]: Image by storyset, retrieved from freepik.
+
+[Material for MkDocs]: https://squidfunk.github.io/mkdocs-material/
+[GitHub Pages]: https://pages.github.com/

docs/installing.md

@@ -19,7 +19,7 @@ pip install \
     - syntax highlighting for multiple languages (which we will need)
     - displaying multiple files next to each other (we will need to modify content in multiple files simultaneously)
     - preview for rendered markdown-files (which we will work with to design the content)
-4. (optional but highly recommended) ... [Git] installed and cofigured on your local computer. 
+4. [Git] installed and configured on your local computer. 
 
 
 

docs/landing.md

@@ -23,8 +23,8 @@ extra:
   social:
     - icon: fontawesome/brands/twitter
       link: https://twitter.com/your-account
-    - icon: ...
-      link: ...
+    - icon: material/email
+      link: mailto:email-address
 ```
 The icon will then appear in the footer of your website. You can search for the icons [here], replacing the `-` with `/` when you enter it in your yaml-file. 
 

docs/resources.md

@@ -0,0 +1,34 @@
+---
+hide:
+  - navigation
+---
+
+There's really a lot you can do to create your own website. Here are some further resources for trying different things:
+
+
+| **Free sites for hosting** | **Other themes for MkDocs**  | **Other static site generators**  |
+| -------------------------- | ---------------------------- |-----------------------------------|
+| Netlify                    | [MkDocs catalog]             | [Jekyll]    | 
+| GitLab Pages               | [MkDocs-themes]              | [Hugo]     |
+| Surge                      |                              | [Docusaurus]     |
+| Firebase hosting           |                              | [Sphinx]    |
+| Bitbucket                  |                              | [GitBook] (closed source)    |
+| Vercel                     |                              | ...    |
+| Render                     |                              |      |
+| Tiiny host                 |                              |      |
+| AWS Amplify                |                              |     |
+| ...               |                              |     |
+
+
+### Resources for HTML coding
+
+Personally, I recommend the tutorial by [W3 Schools]. The documentation is very comprehensive but easy to understand. Additionally, they provide you with an interactive editor where you can try things out and see which changes in the code lead to what kind of difference in the rendering. 
+
+[MkDocs catalog]: https://github.com/mkdocs/catalog
+[MkDocs-themes]: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Themes
+[Docusaurus]: https://docusaurus.io/
+[Jekyll]: https://jekyllrb.com/
+[Sphinx]: https://www.sphinx-doc.org/en/master/
+[GitBook]: https://www.gitbook.com/
+[Hugo]: https://gohugo.io/
+[W3 Schools]: https://www.w3schools.com/html/default.asp

mkdocs.yml

@@ -1,13 +1,12 @@
 site_name: Workshop Web-Design for Scientists
-copyright: > # should remain a link to the original theme
+copyright: <a href="https://choosealicense.com/licenses/mit/">License</a>
   &copy; 2023 Julia-Katharina Pfarr<br>
 
 repo_name: julia-pfarr/workshop_webdesign
 repo_url: https://github.com/julia-pfarr/workshop_webdesign
 
 theme:
   name: material
-  custom_dir: material
   palette:
     primary: blue grey
     accent: custom
@@ -35,6 +34,15 @@ extra:
   social:
     - icon: fontawesome/brands/twitter
       link: https://twitter.com/jk_pfarr
+    - icon: fontawesome/brands/github
+      link: https://github.com/julia-pfarr
+    - icon: fontawesome/brands/linkedin
+      link: https://www.linkedin.com/in/julia-katharina-pfarr-2a6437236/
+    - icon: fontawesome/brands/researchgate
+      link: https://www.researchgate.net/profile/Julia-Katharina-Pfarr
+    - icon: material/email
+      link: mailto:pfarr@staff.uni-marburg.de 
+
 
 #extra_css:
   #- stylesheets/extra.css