Hexo搭建静态博客

入门操作学习

运行环境准备

安装​Git

安装​Node.js

安装Hexo

1
npm install -g hexo-cli

建站

1
2
3
4
hexo init <folder>    #初始化存放博客文件的路径
cd <folder>
npm install           #安装npm
hexo server           #运行博客，这里操作完就能看到一个简易的博文了

安装过程中开启VPN能够加速安装过程

博文添加

手动添加

在​./source/_posts文件夹下添加**.md**文件，格式如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World              // 文章标题
date: 2023-02-11 03:10:45       // 创建时间
tags:
    - hello1
    - hello2                    // 设置2个文章标签，数量自定义
categories: txt                 // 文章分类
index_img:                      // 首页文章的封面图
banner_img:                     // 文章页顶部大图
---
<-- 正文内容 -->

命令行添加

1
hexo new <blog_name>

Hexo常用命令

☛ hexo init <folder>，初始化博客存放文件夹

☛ hexo new <name>，新建博文

☛ hexo server，运行博客

☛ hexo clean，清除缓存文件 (​db.json​) 和已生成的静态文件 (​public​)

☛ hexo generate，生成静态网站文件

☛ hexo deploy，部署网站

☛ hexo version，查看hexo版本

添加评论区

Valine

官网：​https://leancloud.cn

1、​应用→创建应用，创建完成后在设置→应用Keys中获取AppID和AppKey

2、在主题配置文件中指定Valine为评论模块

1
2
3
4
post:
  comments:
    enable: true
    type: valine

3、配置Valine评论模块参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
valine:
  appId:                                #Appid
  appKey:                               #AppKey
  path: window.location.pathname
  placeholder: '支持使用Markdown语法'    #评论区默认填充文字
  avatar: mp                            #默认显示头像
  meta: ['nick', 'mail', 'link']        #显示评论者属性
  requiredFields: []
  pageSize: 10                          #每页显示评论数
  visitor: true                         #文章访问量统计
  lang: 'zh-CN'                         #自定义语言
  highlight: true                       #代码高亮
  recordIP: true                        #是否记录评论者IP
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

4、Valine需要使用Gravatar 自定义评论列表头像；

5、在Valine应用数据存储→结构化数据→Comment内管理评论；

主题自定义

  1. 将主题文件放置在theme文件夹下；
  2. 将主题配置文件​ _config.yml ​复制到博客根目录并重命名为 _config.<主题名>.yml​；

Github实战

创建GitHub站点

https://github.com/

1、使用GitHub用户名创建仓库，命名格式：user.github.io，默认分支为master；（user必须为GitHub的用户名）

2、在user.github.io仓库中新建index.html文件，文件内容如：（一般来说，需要仓库名填写正确+仓库非空，仓库才会对外发布）

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站测试</title>
</head>
<body>
     <h1>成功！！！可以进行下一步了</h1>
</body>
</html>

3、在仓库“Settings”→“Pages”页面可看到如下提示，则仓库发布正常，点击https://user.github.io/可跳转到网站首页；

1
2
Your site is live at https://user.github.io/
Last deployed by @user user 12 minutes ago

保证本地能向Github提交代码

1、配置GitHub用户名、邮箱；

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱"

2、配置秘钥，使用命令ssh-keygen -t rsa生成秘钥，并将公钥添加到GitHub账户；

Hexo代码提交Github

1、网站目录下打开Git Bash安装发布插件，安装命令npm install hexo-deployer-git --save；

2、修改博客配置文件_config.yml的deploy部分；

1
2
3
4
5
deploy:
    type: git
    repository: ssh://git@github.com/user/user.github.io.git
    brandh: master
    messge:

3、上传博客代码

1
2
3
4
hexo s
hexo clean
hexo g
hexo d

4、博客网站搭建完成，通过https://user.github.io/即可访问博客。

☛ 问题1：CNAME、README.md等文件丢失

当你重新提交博客代码后会发现前面修订的配置文件丢失。解决方法是将非md文件放置在source文件夹下，hexo每次提交代码时会将这里的文件复制到public目录后提交到GitHub仓库。但是，md文件会被转换为html，每次提交代码时需要在生成（​hexo g）、上传（hexo d）之间，将md文件手动复制到public目录。

博客托管

域名配置分为：CNAME、A记录。互联网中用IP地址表示一个网站的访问地址，A记录使用一个容易识别的字符串（域名）表示IP地址，CNAME使用一个域名映射到另一个域名。以百度网站举例，最原始用户只能通过36.152.44.96地址访问，添加A记录后能够通过www.baidu.com，而添加CNAME后又能通过www.baidu2.com访问。

CMD上pinguser.github.io获取博客网站IP

Github提供的域名user.github.io不够优雅，当你拥有自己的域名时，就可以将域名关联到user.github.io后，通过自己的域名访问了。但是，Github站点在国内访问并不稳定，这时候我们可以借助中间托管网站进行管理，这里推荐Vercel进行托管，操作如下：

  1. 进入Vercel官网，登录账号使用Github账户；

  2. 点击“add New”→“Project”新建项目，import对应Github项目即可；

  3. 点击进入新增的项目，进入“Setting”标签页，绑定我们的个人域名；

    image

  4. 进入域名服务商官网，在自己域名的域名解析中添加A记录和CNAME记录，记录值在第3步时Vercel会进行提示，复制粘贴即可。

  5. 操作完成，在网页中输入个人域名就能访问博客网站了。

在线编辑博文

Hexo本地搭建博客后，用户每次编辑博文都需要在本地编译出博客源文件，再将博客源文件提交到GitHub。为了提高Hexo编辑博文的易用性，我们可以通过GitHub Actions实现博客的自动编译发布，即我们每次提交博客源码或GitHub上更新博文后，GitHub Actions自动触发博客的编译发布。

1、添加秘钥用于deploy过程操作GitHub仓库；

  • 使用命令ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""生成gh-pages私钥、gh-pages.pub公钥；

  • 仓库配置Deploy Keys→Add deploy key添加 gh-pages.pub公钥，name为public key of ACTIONS_DEPLOY_KEY，并在新建deploy key后点击approve按钮。

  • 仓库配置secrets and variables→Actions→New repository secret ，name为ACTIONS_DEPLOY_KEY（后续yml文件中使用）。

2、新建.github/workflows/pages.yml文件自定义GitHub Actions操作，内容参照Hexo指导文档。

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
name: Pages

on:
  push:
    branches:
      - sources # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 19.x
        uses: actions/setup-node@v2
        with:
          node-version: "v19.6.0"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Git Infomation
        run: |
          git config --global user.name 'name'
          git config --global user.email 'email'
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          user_name: ${user.name}
          user_email: ${user.email}
          # 获取提交文章源码时的commit message，作为发布gh-pages分支的信息
          commit_message: ${{ github.event.head_commit.message }}
          full_commit_message: ${{ github.event.head_commit.message }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

3、在博文底部添加编辑文章按钮，支持跳转到GitHub编辑界面。编辑themes→主题文件夹→layoutpost.ejs文件，在markdown-body模块下添加：

1
2
3
<div style="text-align: center ">
<a href="https://github.com/user/user.github.io/edit/sources/source/<%- page.source %>" target="_blank">编辑文章✏</a>
</div>

指导文章：

Blog
#Hexo #Blog
Hexo搭建静态博客
https://sslin.online/2023/02/11/Hexo搭建博客/
作者
sslin
发布于
2023年2月11日
许可协议