目录

使用hugo搭建网站

安装Hugo

Hugo 安装指南

使用二进制安装最快,Mac下直接使用Homebrew安装

1
brew install hugo

搭建网站

  1. 执行以下命令新建一个 Hugo 网站

    1
    
    hugo new site ~/my/cana.space  # "cana.space" 是我的网站文件夹名。
    
  2. 使用主题

    打开 Hugo Themes 页面 ,选择一个你喜欢的主题。

    下文以LoveIt主题为例

  3. 下载主题

    1
    
    git clone --depth 1 git@github.com:dillonzq/LoveIt.git
    

    LoveIt主题相关配置请参考:LoveIt主题配置说明

  4. 新建一篇文章

    1
    
    hugo new /posts/hello-world.md
    
  5. 编辑文章,添加内容保存

预览网站效果

  1. 启动server
1
2
3
$ hugo serve
或者
$ hugo serve -e production --disableFastRender # 生产环境, enables full re-renders on changes
  1. 使用浏览器打开 http://localhost:1313 预览

部署网站到github

  1. 构建网站

    1
    
    hugo  # 构建你的 Hugo 网站,默认将静态站点保存到 "public" 目录。
    
  2. 将网站文件夹初始化为git库

    1
    2
    3
    4
    
    cd ~/my/cana.space/public
    git init
    # 查看 public 目录下的文件,会发现多了 .git 文件
    ls -a
    
  3. 将git本地库关联至远程仓库

    1
    
    git remote add origin git@github.com:lienhui68/lienhui68.github.io.git
    
  4. 查看config文件

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    
    cat .git/config  # 显示 config 信息。
    [core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true
    [remote "origin"]
        url = git@github.com:lilin90/lilin90.github.io.git
        fetch = +refs/heads/*:refs/remotes/origin/*
    

    如果 [remote "origin"] 信息正常显示,说明你的 Git 本地库已成功关联至远程库。

  5. 将修改推至远程库

    1
    2
    
    cd ~/my/cana.space/public
    git push -u origin master
    

附部署脚本

 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#!/usr/bin/env bash

BLOG_ROOT_DIR=/Users/david/my/cana.space
PUBLIC_DIR=$BLOG_ROOT_DIR/public
CONTENT_DIR=$BLOG_ROOT_DIR/content

read -p "input commit message:" msg

echo "blog 根目录: ${BLOG_ROOT_DIR}"
echo "public 目录: ${PUBLIC_DIR}"

# 如果msg为空则使用时间代替
if [ -z "$msg" ];then
	echo "you have not input the msg, now it will take the defualt msg whit tiemstamp."
	msg=$(date +%Y_%m_%d_%H_%M%S)
fi

echo "=====开始自动化部署, 共5步========="

# 备份
echo "======step1. 开始备份========"
cd $CONTENT_DIR
git add .
git commit -m msg
git push 
echo "======step1. 备份成功========"



# 构建
echo "======step2. 开始构建========"
cd $BLOG_ROOT_DIR
hugo
echo "======step2. 构建成功========"

# 上传algolia索引文件
echo "======step3. 开始上传algolia索引文件========"
npm run algolia
echo "======step3. 上传algolia索引文件成功========"


# 上传静态代码到服务器
echo "=======step4. 开始上传静态代码到服务器======"
# 上传
cd $PUBLIC_DIR
git add .
git commit -m msg
git push 
echo "=======step4. 上传静态代码到服务器成功======"

# 登录到服务器上pull代码
echo "=======step5. 开始登录远程服务器并pull代码======"
ssh root@47.97.9.157 "cd /usr/local/nginx/web && git pull"
echo "=======step5. 登录远程服务器并pull代码成功======"

# 回到根目录
cd $BLOG_ROOT_DIR
echo "========Congratulations! 已成功完成自动化部署========="

恭喜!现在你已经走完了全程,拥有了一个自己构建的博客网站。

我的博客地址是 lienhui.github.io 如果你想使用 HTTPS 以防止其他人窥探或篡改网站流量,在 GitHub 上打开相应的库,点击 Settings 勾选 Enforce HTTPS 即可。

btw, 我购买了域名cana.space,并将其关联到了默认的URL lienhui.github.io。所以如果你访问 lienhui.github.io,会自动跳转至cana.space

接下来

之后添加一篇文章,使用如下几步即可:

  1. 新建一篇文章,编辑内容。
  2. 本地预览网站呈现效果。
  3. 构建 Hugo 网站。
  4. 提交修改至 Git 本地库。
  5. 将修改推至远程库。

更新日志

网站上云

网站上云

为网站配置ssl证书

站内链接

网站图标,浏览器配置,网站清单

强烈建议你把:

  • apple-touch-icon.png (180x180)
  • favicon-32x32.png (32x32)
  • favicon-16x16.png (16x16)
  • mstile-150x150.png (150x150)
  • android-chrome-192x192.png (192x192)
  • android-chrome-512x512.png (512x512)

放在 /static 目录. 利用 https://realfavicongenerator.net/ 可以很容易地生成这些文件.

可以自定义 browserconfig.xmlsite.webmanifest 文件来设置 theme-color 和 background-color.

搜索

本站选择使用algolia进行搜索,具体办法是我们将数据库的信息以JSON的格式上传到Algolia服务器,然后通过相应的API进行搜索,搜索可以是前端也可以是后端。这里描述的JavaScript的用法,不仅高效,而且对用户友好。Algolia的免费许可允许上传10,000条JSON数据,每月允许100,000次操作(包括上传和搜索),还是相当不错的。在本站有400多篇文章的时候计算了下json条目,在3000到4000之间,所以1000篇文章以内是足够使用的。

配置步骤如下:

  1. config.toml配置

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    # 搜索配置
          [languages.zh-cn.params.search]
            enable = true
            # 搜索引擎的类型 ("lunr", "algolia")
            type = "algolia"
            # 文章内容最长索引长度
            contentLength = 4000
            # 搜索框的占位提示语
            placeholder = "搜索"
            # 最大结果数目
            maxResultLength = 10
            # 结果内容片段长度
            snippetLength = 50
            # 搜索结果中高亮部分的 HTML 标签
            highlightTag = "em"
            # 是否在搜索索引中使用基于 baseURL 的绝对路径
            absoluteURL = true
            [languages.zh-cn.params.search.algolia]
              index = "index" #algolia 里面的 index 名称相对应,如果你有多语言版本,那么就需要创建多个语言的 index
              appID = "" # Application ID
              searchKey = "" # Search-Only API Key
    
  2. 登录 Algolia 官网 ,注册账号,按照guide创建index(注意和toml中配置保持一致)->上传index.json->配置属性

    存储地区选择香港就好了

  3. 每次写完博文都手动上传索引文件无疑是痛苦的、无意义的重复劳动。因此我们需要把上传索引文件的操作自动化,在自动部署的时候顺便完成即可。这里我们采用npm包 atomic-algolia 来完成上传操作。

    1. 首先安装npm,这里不做介绍

      1
      2
      
      $ npm -v
      6.14.8
      
    2. 安装 atomic-algolia

      1
      2
      3
      
      # 在网站根目录下执行
      npm init -y
      npm install atomic-algolia --save
      
    3. 修改目录下的 package.json 文件,在 scripts 下添加 "algolia": "atomic-algolia",目的是取一个别名,注意 "test" 那一行末尾有个英文逗号,不要漏了。

      1
      2
      3
      4
      
      "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "algolia": "atomic-algolia"
      },
      
    4. 在网站根目录下创建.env文件存放algolia配置

      1
      2
      3
      4
      
      ALGOLIA_APP_ID="xxxx"
      ALGOLIA_ADMIN_KEY="xxxxx"
      ALGOLIA_INDEX_NAME="index"
      ALGOLIA_INDEX_FILE="public/index.json"
      
      注意
        注意:只有执行`hugo` 生成静态文件,才会在 public 目录生成index.json 索引。
      
    5. 上传索引

      在网站根目录下执行

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      
      $ npm run algolia
              
      > cana.space@1.0.0 algolia /Users/david/my/cana.space
      > atomic-algolia
              
      [Algolia] Adding 1 hits to index
      [Algolia] Updating 1 hits to index
      [Algolia] Removing 0 hits from index
      [Algolia] 3215 hits unchanged in index
      {
        objectIDs: [
          '/%E4%BD%BF%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99/:1:0',
          '/%E4%BD%BF%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99/:0:0'
        ],
        taskID: { index: 581438073001 }
      }
      

    可以看到我们成功添加了记录。

给Valine绑定二级域名

LeanCloud 中国版将在10月1日后停止为不绑定自有域名的应用服务,详情参见:请各位用户在 10 月 1 日前绑定自己的域名

通告中规定“如果没有绑定 API 域名,存储、即时通讯、云函数会被禁用;如果没有绑定文件域名,将不能使用文件相关的 API;”,由于我们的评论系统和阅读计数都使用到存储,所以需要绑定API域名,具体绑定步骤如下:

  1. 通过官方网站登陆;

  2. 进入自己的应用点击设置>域名绑定,自定义一个二级域名,在API域名这里填入你自己自定义的二级域名,按下图填入。

    http://img.cana.space/picStore/20201104024052.png

    ssl证书选自动就好了,省的每隔一年还得手动更新一次。当然如果碰到下面这个问题,那么切换成手动模式就好了

    “启用自动 SSL 管理后,LeanCloud 会自动申请、续期 Let’s Encrypt 证书。目前 Let’s Encrypt 的 OCSP 服务器的部分 CDN 节点在国内少数地区存在网络连通性问题,可能会导致 iOS 应用界面卡顿。Let’s Encrypt 正协同其 CDN 服务商解决这一问题。如果收到较多 iOS 用户反馈这一问题,建议暂时切换到手动 SSL 管理模式。”

  3. 在 leancloud 应用中添加域名后,还需要在自己的域名服务商那里添加CNAME解析,下图在阿里云平台的操作图。

    http://img.cana.space/picStore/20201104024725.png

    记录值填写leancloud分配的域名。

    http://img.cana.space/picStore/20201104024931.png

    由于dns配置的每10分钟ttl一次,所以需要等待10分钟dns才能解析到分配的域名,10分钟后…

    http://img.cana.space/picStore/20201104025502.png

    1. 配置好二级域名后,将二级域名应用自己的网站吧,复制以下地址

      http://img.cana.space/picStore/20201104030147.png

      hugo网站配置

      20201104030221

问题记录

运行hugo serve时报fatal error: pipe failed xxx runtime.sigNoteSetup

参考地址

问题原因:the problem is with too many files

问题解决:关闭渲染,使用hugo serve --watch=false运行

参考

Hugo添加Algolia搜索支持

Hugo(二)algolia 博客搜索及自动化处理脚本