Website Design¶
Static Website Generators¶
HTML file on a server, opens in a browser. Classic model. Dynamic webpage where page changes according to the data, a database is used, an application is users to fetch data and generate html page.Static website offers better security, performance, and less dependencies. Everything is embedded in HTML.
Popular: Jekyll (Ruby), MkDocs (Python), Hugo (GoLang)
https://jamstack.org/generators/
Frameworks¶
MkDocs¶
MkDocs¶
MkDocs - Official Documentation
Material Theme for MkDocs - Official Documentation
http://tatsuro.homma.fabcloud.io/fabacademy/tips/content/markdown/
Hugo¶
Themes¶
I chose to try the Eureka theme for my website. To install the theme, I created a new directory, EurekaHugo, and then created a new Hugo website using the starter code:
hugo new site ./
Then, I needed to establish a git repository in order to install the website theme into my directory. This was done with the usual:
git init
git add .
git commit -m "Initial commit"
Once the repository was created, then you can install the theme from GitHub using the following code:
git submodule add https://github.com/wangchucheng/hugo-eureka.git themes/eureka
I am not exactly sure what submodule but I think it allows for you to nest a git within an existing repository. I’ll research or read this in my book at some point.
I then had to copy the config folder in the example site into the project root directory, delete the original config.toml file that comes with Hugo, and run the server to test it out.
Adding Content¶
Content in Hugo is a collection of Markdown files (MD). Therefore, to generate a post or page or any other type of content, you simply need to manually create a markdown file within the content folder.
The above screenshot shows a new post markdown file that was generated. It is located within a subfolder, posts. The theme automatically sorts this into a posts section on the website.
