这篇文章介绍如何使用 github.io 和 hugo 建立个人博客。
github.io是Github免费提供的Pages服务,可发布静态页面,建立个人博客。
hugo是Go编写的静态网站生成器,可将Markdown文件渲染为静态网页内容,非常适合博客、文档等网站的生成。
github.io
新建public仓库,可在设置中选择发布,Settings->Pages->Deploy from a branch,选择分支和路径。github支持根目录和/docs目录。
名为USERNAME.github.io的repo可通过https://USERNAME.github.io/访问,其他名称的repo通过https://USERNAME.github.io/<repo_name>访问。
hugo
下载extend版本的hugo。
1
2
3
4
5
6
|
hugo [subcmd] -h # help
hugo new site mysite
cd mysite
hugo server
# Web Server is available at http://localhost:1313/
|
由于没有任何页面,访问会出现Page Not Found。
添加theme:
1
2
3
4
5
|
hugo new theme mytheme
echo theme = 'mytheme' >> hugo.toml
hugo new content xxx.md # 在content子目录下创建md文件, 自动添加front-matter
hugo server # 开启本地服务器
hugo -D # 在public目录生成静态页面, -D即包含标为draft的文档
|
可访问hugo官网下载现成的theme。
新版hugo默认配置文件为hugo.toml,删掉此文件则可依旧使用config.toml。
- 配置项有些是hugo通用(由hugo使用),有些是各个主题特有(在主题的模板文件中使用)
beautiful-hugo
beautiful-hugo界面类似beautiful-jekyll。
按需修改config.toml。比如给代码块添加行号,修改静态页面导出目录等:
1
2
3
4
5
6
7
8
9
10
11
12
|
publishDir = "docs" # 修改导出目录
[markup]
[markup.highlight]
codeFences = true
guessSyntax = true
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = false
noClasses = true
style = "github"
tabWidth = 4
|
markdown文档中,<!--more-->标签之前的内容默认作为文章摘要。
repo配置
如果出于某些考虑,比如不愿意公开md文件,只想发布纯粹的静态页面,可参照此方式。其他主题类似。
创建名为blog_gen的私有仓库。创建名为USERNAME.github.io的仓库,设为存放静态页面的公开仓库。
1
2
3
4
5
|
git clone git@github.com:USERNAME/blog_gen.git
hugo new site blog_gen --force
cd blog_gen
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
# cp -r themes/beautifulhugo/exampleSite/* . -iv
|
添加ctrl.bat文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
@echo off
set arg=%1
set blog=docs
set username=sulpc
set reponame=%username%.github.io
if "%arg%"=="prepare" (
if exist %blog% (
echo %blog% exsit, delete it
rm -rf %blog%
) else (
echo %blog% not exsited
)
git submodule init
git submodule update
git clone git@github.com:%username%/%reponame%.git %blog%
) else if "%arg%"=="commit" (
cd %blog%
rm -rf *
cd ..
hugo -D
cd %blog%
git add .
git commit -m x
git push
echo %blog% pushed done
cd ..
git add .
git commit -m x
git push
echo all pushed done
) else (
echo usage: ctrl.bat prepare/commit
)
|
从git上拉取到本地后,先执行ctrl prepare,将public目录与USERNAME.github.io关联。本地添加完文章,没有问题执行ctrl commit将修改推入git。
jekyllrb
jekyllrb和Hugo均为静态页面生成器,使用md编写网页。本地运行Jekyll需要Ruby环境,未尝试。
beautiful-jekyll
将beautiful-jekyll项目fork该项目到自己的仓库,命名为USERNAME.github.io,简单配置。
添加markdown后push上去即可访问。比其hugo反而更简单一些。