本站使用hugo+jane+自定义域名实现建站。

  • Hugo 是一个用Go 编写的静态网站生成器。

  • jane是其中一个相对洁净的theme

  • 网站托管在github

  • 官网见：https://gohugo.io mac版

安装git

要求：git version 2.0以上

1
2

git --version
brew install git

安装hexo

1
2

brew install hugo
hugo version

建立项目

1
2

hugo init site_name
cd site_name

安装theme

1

git submodule add https://github.com/xianmin/hugo-theme-jane.git themes/jane

注意，一个git仓库中的某个目录，依赖另一个仓库时，submodule是个好方法，可以独立更新。这时会在根目录下生成一个 .gitmodules 文件

1
2

git submodule init
git submodule update

配置文件

1
2
3

cp themes/jane/config-dev.toml ./config.toml  #使用theme中的配置文件,这个配置文件很仔细
rm hugo.toml  # 删除原配置文件
hugo server # 运行

至此，看到#http://localhost:1313/ 界面

site_name目录为网站根目录，此后所有命令均在根目录下执行。

配置

按照注释配置config.toml即可，无难度。稍微注意：

1
2
3
4
5

    defaultContentLanguage = "zh-cn" 
    #需要增加
    [languages.zh-cn]
      languageCode = "zh-cn"
    #并且将theme/i18n的内容复制到 i18n/

meta约定

在md文件头上，两个—之间的部分，称为元数据。 以下为示例。在全局变量定义过后，依然可以在配置文件中重新定义并覆盖全局变量

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    title: "网站结构"
    date: 2024-03-06T16:01:23+08:00
    lastmod: 2024-03-07T16:01:23+08:00
    draft: false
    tags: ["hugo", "建站"]
    categories: ["技术"]
    author: 
    weight: 1
    # 定义菜单
    menu:  
      main:
        parent: "docs"
        weight: 1
     
    # comment: false
    # toc: false
    # contentCopyright: '<a href="https://github.com/gohugoio/hugoBasicExample" rel="noopener" target="_blank">See origin</a>'
    # reward: false
    # mathjax: true

发表文章

  • 方法1
1

hugo new post/article_name.md

  • 方法2

    直接去content/post目录里新建文件，执行hugo 生成静态页面

关联github

此处省去申请github个人网站流程，假设您打开calfen.github.io已经能看到页面。public为生成的静态网站，也就是github的个人页面。

1
2
3
4

cd public/
git init
git remote add origin git@github.com:calfen/calfen.github.io.git
git push --force origin main ## 注意，此操作将删除github原个人网站。

自定义域名

修改域名：在github.com → setting → pages →custom domain

网站根目录CNAME.txt为github自动生成

💡 注意，一定要将CNAME放到content下面，这样每次生成静态页面时不会丢失。

自动化发布

以上发布比较繁琐，我们可以借用官方提供的 GitHub Action 进行 CI 自动发布。

回顾一下：这儿有三个库。

  • hugo_site网站项目库。我们的目的是提交项目库的时候，利用action，生成public目录自动发布到个人网站

  • hugo网站项目库的themes目录是git的submodule管理的你用的theme库，可以独立更新。

  • github个人页面库，也就是public对应的github的库 calfen/calfen.github.io

    Hugo_site的public不需要同步，本地看看就行。remote的hugo_site会自动生成。加到.gitignore里

在本地Hugo_site库中增加文件。vi .github/workflows/blog_deploy.yml 格式如下。

 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

name: deploy                                                                                                

on:
    push:
    workflow_dispatch:
    schedule:
        # Runs everyday at 8:00 AM
        - cron: "0 0 * * *"
jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"
                  extended: true

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  personal_token: ${{ secrets.access_token }} 
                  EXTERNAL_REPOSITORY: calfen/calfen.github.io
                  PUBLISH_BRANCH: main 
                  PUBLISH_DIR: ./public
                  commit_message: ${{ github.event.head_commit.message }}

需要特别注意

  • personal_token: ${{ secrets.access_token }}
    • personal_token不用改，指的是github -> settings -> developer settings -> persional access tokens中生成的令牌
    • ${{ secrets.access_token }} access_token为项目库中 settings-> secrets and variables 导入的token，这个token的名字为access_token，如果用其他的名字，请修改对应名称

多终端使用

到现在为止，终端上所需的仅仅是content目录（如果不用hugo命令创建新贴），当content/post里的md文件新增或者改变，并push到远程库后，编译和发布都由github完成。

所以，您的多台电脑都可以安装git后，更新hugo_site（也许您是其它名字）库中的md文件。做到随便找到个终端就能发blog了。我甚至用ipad，iphone也能更新网站，只不过如果没有蓝牙键盘，敲字就是个很累的工作。正经干活，还得电脑。

🤔 啥时候ipad os能自带shell，就轻松了。

当然，如果需要本地查看效果，还是要安装hugo。

图床

blog自然少不了图，我采用typora + PicGo + 阿里云oss对象存储服务。实在没钱可以采用typora + PicGo + github。搭建方法网上大把，不做赘述。