526互联

Hexo搭建静态博客

发布时间 2023-05-01 23:41:40作者: 小林同学sslin

入门操作学习

运行环境准备

安装Git

安装Node.js

安装Hexo

npm install -g hexo-cli

建站

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

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

 

博文添加

手动添加

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

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

命令行添加

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为评论模块

post:
  comments:
    enable: true
    type: valine

3、配置Valine评论模块参数

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文件，文件内容如：（一般来说，需要仓库名填写正确+仓库非空，仓库才会对外发布）

<!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/​​可跳转到网站首页；

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

保证本地能向Github提交代码

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

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部分；

deploy:
    type: git
    repository: ssh://git@github.com/user/user.github.io.git
    brandh: master
    messge:

3、上传博客代码

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​​访问。

  • A记录：www.baidu.com → 36.152.44.96
  • CNAME：www.baidu2.com → www.baidu.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”标签页，绑定我们的个人域名；

     

    ​

  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指导文档。

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​​模块下添加：

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

 

指导文章：

 

​