As a programmer and a programmer with pursuit, technical influence is indispensable to us. Today, let's talk about how I use Hugo and GitHub Pages to quickly build a personal content output platform.
Introduction to Hugo and GitHub Pages
Hugo : the world's fastest website construction framework, which generates HTML static pages from Markdown files.
GitHub Pages GitHub provides a static web hosting service that does not require additional servers to deploy your blog system.
Mac binary installation directly using the following command
brew install hugo
GitHub creates a warehouse, such as Xiaohe blog, and git clone to the local database
Initialize the warehouse of Clone with Hugo
hugo new site xiaohe-blog --force
The generated file directory should be as follows:
├── archetypes // Article default template │ └── default.md ├── config.toml // configuration file ├── content // Markdown file ├── data // ├── layouts // html file ├── static // Pictures, CSS, JS └── themes // hugo theme
In order to build quickly, the default theme is used, and the theme is modified according to personal needs in the later stage
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo theme = \"ananke\" >> config.toml
- Post a blog
hugo new posts/my-first-post.md
You can also create a markdown file directly under the / contents folder
- Local start test
hugo server -D
Open the address given by the command line, modify the markdown file, and the web page will change in real time
- GitHub Pages settings (only the simplest one is introduced here)
Github warehouse Homepage - > Settings - > Pages - > main - > docs - > save
A website address will appear: user-name.github.io/repo-name/
This means that opening this address will display the contents under the warehouse / docs.
Next, our work is: put the static web page generation file generated by Hugo in the / docs folder, and then push it to GitHub.
- Modify config.toml
The example is as follows. Please modify it yourself
baseURL = 'https://He2121. GitHub. IO / Xiaohe blog / '/ / set it to your own languageCode = 'zh-cn' title = 'Xiaohe's blog' theme = "ananke" publishDir = 'docs'
- Generate static web pages and push them to GitHub
hugo -D // Generate static web pages git add . git commit -m "first commit" git push
Open the page link provided by GitHub https://he2121.github.io/xiaohe-blog/
Is the test successful
It is suggested to jump to the summary first
Usually use idea/vscode to edit markdown locally, see the web page effect locally in real time, generate a static web page after editing, and then push it to the remote to output an article
I chose this theme https://themes.gohugo.io/themes/hugo-theme-cactus-plus/
Just follow the tutorial.
Comment function to go https://disqus.com/ Apply for an account number.
Web statistics https://analytics.google.com/analytics/web/ Registration.
Give personal profile
baseURL = 'https://he2121.github.io/xiaohe-blog/' languageCode = 'zh-cn' defaultContentLanguage = 'cn' title = 'Xiaohe's blog' publishDir = 'docs' theme = 'github.com/nodejh/hugo-theme-mini' googleAnalytics = 'G-583xxxxxx' disqusShortname = 'xxxx' [social] github = "https://github.com/he2121/" [params] author = 'Xiao He' bio = 'Golang engineer' description = "Xiaohe's blog" enableGoogleAnalytics = true enableComments = true [[params.links]] name = "tag" path = "/xiaohe-blog/tags" [[params.links]] name = "algorithm" path = "/xiaohe-blog/algorithm" [[params.links]] name = "Station construction" path = "/xiaohe-blog/Station construction" [[params.links]] name = "Gossip" path = "/xiaohe-blog/Gossip"
Using Hugo and GitHub Pages can quickly build a personal website, but customization takes time,
It is recommended that novices use all the default functions. Writing articles is the focus, and others should be ignored for the time being.