手把手教你搭建一个属于自己的Blog-一一网

技术选型

wkxk的blog，欢迎大家留言互动~

本文介绍采用Hexo+keep+Github Actions这一套技术实现blog搭建及自动化部署。

开始搭建

安装node，下载地址：nodejs
安装hexo：
```
npm install hexo-cli -g
复制代码
```

初始化博客目录：

hexo init wkxk.github.io (这里的wkxk换成你自己的英文名)
复制代码

初始化完成后，我们就进入我们的目录：
```
cd wkxk.github.io
复制代码
```
安装
```
npm install
复制代码
```
clean一下，然后生成静态页面
```
hexo clean
hexo g
复制代码
```
g 就是generate ,生成的意思
把你的网站运行起来
```
hexo s
复制代码
```
s 就是server ,在服务器运行的意思
打开你的浏览器，输入 localhost:4000 。自此，你的个人网站就这么速度的搭建起来了！

装饰下你的个人网站

修改你的网站中的个人信息

进入你的网站目录，打开 _config.yml 文件，这个文件是用来配置你的网站信息的。

这里列出我的简单配置，具体可以看这个文档

title: wkxk's Blog
subtitle: wkxk的个人博客
description: wkxk的个人博客，主要涉及到编程(JavaScript,Vue2,Vue3,Webpack,node),助于个人学习提升，分享学习过程
keywords: JavaScript,Vue2,Vue3,Vite,Webpack,node
author: wkxk
language: zh
timezone: Asia/Shanghai
复制代码

选一个主题

刚搭建完的网站，是不是觉得有点丑，不符合你的漂亮的脸庞？反正我是这么觉得的，那么就选一个主题来装饰一下吧，在这里可以选择你要的主题：hexo主题

下载主题

选择好了你的主题之后，就可以下载主题资源了，比如我这里选择一个keep 主题来演示一下：

keep 主题github地址：github.com/XPoet/hexo-…

keep 主题官方文档：keep-docs.xpoet.cn/

# 这里使用npm方式安装方便后期进行代码托管维护
npm install hexo-theme-keep
复制代码

配置主题

主题下载完之后，在你根目录下的 _config.yml 文件中，修改 theme 为你的主题名字：

theme: keep
复制代码

重新生成和运行

hexo g
hexo s
复制代码

keep主题

博客文章

两种方式来新建你的博文

命令形式

在你的blog目录下使用如下命令：

hexo new hello （这里的article写上你的文章的名称）
复制代码

你的source/_posts下就会生成一个 hello.md文件，在这个文件下就可以写上你的博客内容了。用 Markdown 的语法去写。

直接新建方式

直接点的方式就是直接在source/_posts新建一个 Markdown 文件。

打上标签

打标签能让你的文章方便检索。

打开标签功能：

hexo new page tags
复制代码

这时候你的source/下生成 tags/index.md 文件，我们将其打开，然后把它改成：

type: "tags"
comments: false
复制代码

这时候你要为你的文章打上标签就可以在文章的头部写上：

---
title: Vue源码剖析(二) — Vue虚拟DOM
date: 2021-04-23 15:36:27
tags: Vue Virtual DOM
tags: <<其他你想打的标签>>
---
复制代码

添加分类

分类，归档，是你博客的特性之一。

打开分类功能：

hexo new page categories
复制代码

这说你的source目录下生成 categories/index.md 文件，我们将其打开，把它改成：

type: "categories"
comments: false
复制代码

这时候你就可以给你的文章归类存档了，使用方式就是在你的文章的头部加上：

---
title: Vue源码剖析(二) — Vue虚拟DOM
date: 2021-04-23 15:36:27
tags: Vue Virtual DOM
categories: Vue源码剖析
categories: <<其他你想分的类>>
---
复制代码

注意：标签和分类要确定你的配置文件 _config.yml 是否有打开了 tag_dir: tags 和 category_dir: categories。另外，Markdown 的语法是写作最优雅最简洁最简单的，如果之前没用过的建议去学一下Markdown 语法说明，一般一个钟左右就能掌握。因为它和HTML那样简单。

添加评论

keep主题提供评论系统，详情见keep-docs.xpoet.cn/usage-tutor…

根据自己的喜好选择一个评论系统，作者使用的gitalk，效果图如下：

部署到线上

可以通过GitHub Pages来创建免费的线上访问地址。

创建Github pages 仓库

创建一个xxx.github.io的 public 仓库，这里的xxx写你的名字，比如我写的是 wkxk.github.io,那么到时我就可以通过 wkxk.github.io 来访问我的网站了。创建完成之后，那么你就有自己的 Git 地址了。

安装 hexo-deployer-git

cd wkxk.github.io
npm install hexo-deployer-git --save
复制代码

配置你的Git

打开你的配置文件_config.yml：

deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git // 输入你的git地址
复制代码

推送你的网站到Github上

hexo d
复制代码

d 就是 deploy ，部署上去的意思。

访问你的网站

直接在浏览器输入你的 xxx.github.io 就可以访问了。

绑定自己的域名

添加 CNAME 文件

# 进入sources
cd sources
# 创建CNAME文件，写入自己的域名，如：www.iwkxk.com
touch CNAME
复制代码

在你的域名商后台进行 DNS 解析添加两条记录：

1. 主机记录： @
    记录类型：A
    记录值：192.30.252.154 或者 192.30.252.153

2. 主机记录： www
    记录类型： CNAME
    记录值： xxx.github.io  (这里就是你的github仓库名称)
复制代码

GitHub 设置域名

在你的 GitHub 设置域名，在你的 GitHub 博客项目中点击 Settings，在 GitHub Pages 下的 Custom domain 写上你的域名，然后 save。

自动部署

根据之前的步骤我们使用 Hexo + Keep 主题搭建了一个在线博客，下面教你如何使用 GitHub Actions 将博客自动部署到 GitHub Pages。

购买服务器

我这里买的搬瓦工服务器，大家可以根据自己的需求选择阿里云，百度云的都是可以的。

GitHub Actions

创建 GitHub 仓库

创建一个私有仓库用来存储 Hexo 项目源代码。（保证你的重要信息不泄露）

text仓库的master分支用来存放源代码

公共仓库用来存储编译之后的静态页面。（这里就不用在创建仓库了，之前我们部署过github pages到xxx.github.io）

xxx.github.io这个仓库的master分支用来存储静态文件

当私有仓库的 master 有内容 push 进来时（例如：主题文件，文章 md 文件、图片等），会触发 GitHub Actions 自动编译并部署到公共仓库的 master分支。

创建 GitHub Token

创建一个有 repo 和 workflow 权限的 GitHub Token 。

新生成的 Token 只会显示一次，如有遗失，重新生成即可。

创建 repository secret

将上面生成的 Token 添加到私有仓库的 Secrets 里，并将这个新增的 secret 命名为 HEXO_DEPLOY （名字无所谓，看你喜欢）。
步骤：私有仓库 -> settings -> Secrets -> New repository secret。

新创建的 secret HEXO_DEPLOY 在 Actions 配置文件要用到，需跟配置文件保持一致！

添加 Actions 配置文件

在你的 Hexo 项目根目录下创建 .github 文件夹。
在 .github 文件夹下创建 workflows 文件夹。
在 workflows 文件夹下创建 hexo-deploy.yml 文件。

hexo-deploy.yml 文件配置如下：

name: deploying Hexo project to GitHub pages
on:
  push:
    branches:
      - master # master 分支有 push 行为时就触发这个 action

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
        env:
          PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }} # secret 名
          PUBLISH_REPOSITORY: wkxk/wkxk.github.io # 公共仓库，格式：GitHub 用户名/仓库名
          BRANCH: master # 分支，我这里是推送到wkxk/wkxk.github.io仓库里的master分支(根据自己的仓库进行填写)
          PUBLISH_DIR: ./public # 部署 public 目录下的文件

复制代码

在上面的配置文件中，使用了 theme-keep 组织封装的 hexo-deploy-github-pages-action ，是一款专门部署 Hexo 博客到 GitHub pages 的 action，欢迎大家 Star 和 Fork

自动部署触发流程

修改你的 Hexo 博客源代码（例如：增加文章、修改文章、更改主题、修改主题配置文件等等）。
把你修改过的 Hexo 项目内容（只提交修改过的那部分内容） push 到 GitHub 公共仓库（本例：test）的 master 分支。
GitHub Actions 检测到 master 分支有内容 push 进来，会自动执行 action 配置文件的命令，将 Hexo 项目编译成静态页面，然后部署到私有仓库的 master 分支。
在私有仓库的 Actions 可以查看到你配置的 action。