发布于 

Hexo+Github Page搭建个人博客

须知

  1. 拥有一个github账号，知道如何使用 git 命令 在线学git

  2. 有基本的 markdown 基础，markdown官方教程

  3. 环境：windows10

什么是github page

GitHub 官方提供的一种免费的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架，可以将Markdown 文档解析渲染成静态的 HTML 网页。

Hexo + GitHub 搭建博客的原理

在本地写完 Markdown 格式的文章后，通过 Hexo 解析文档，渲染生成具有主题样式的 HTML 静态网页，再通过git推送到 GitHub 上，利用github page形成可以访问的网页。

流程图
流程图

为什么使用Hexo+Github

  1. Hexo上有很多现成的主题，可以直接使用，就不用自己写网页的代码了，只需要写文章就行

  2. 使用github.io就无需公网ip和域名，省去了租用云服务器的费用和购买域名的费用

  3. 免费，简单

使用到的软件

  1. git：2.32.0.2

  2. node.js 18.17.1 LST

  3. MarkText 0.17.0.1

  4. hexo：6.3.0

软件官网

git

git 是用于协作开发、版本控制和代码管理的一个软件。

简单来说：就是可以通过使用git 来向github、gitee、gitlab等网站提交自己项目代码。

Node.js

Node.js是一个开源的JavaScript运行时环境，它允许你在服务器端运行JavaScript代码

MarkText

[MarkText汉化](Releases · chinayangxiaowei/marktext-chinese-language-pack (github.com))

MarkText 是一个开源免费的 markdown 文件编辑器。

hexo

Hexo 是一个快速、简洁且高效的博客框架,基于 Node.js 运行，将Markdown 文档解析渲染成静态的 HTML 网页，在几秒内，即可利用靓丽的主题生成静态网页。

注意事项

  1. 如果软件官网无法打开，或者下载软件时失败，可能是没有使用魔法，可以使用一些镜像站进行下载

  2. node.js 和 hexo 的版本有要求，可以在hexo官网查看

出现本教程中没有说到的问题，请自行搜索解决办法。

安装软件

一直next即可。

git

建议不要修改安装目录，安装在C盘就可以

node.js的安装
node.js的安装

如果没有安装在 默认目录下 后面可能会导致后面初始化 hexo 时，导致权限不够。

解决办法：

  1. 找到你的node.js的安装目录，然后 右键 点击 属性
  1. 选择 安全 ，点击 编辑 ，将 Authenticated Users 和 User 的权限修改为

即可初始化 hexo

MarkText

hexo

  1. 选择一个位置创建一个文件夹，随便取个名字即可，本教程的该文件夹路径为 D:\github_blog

  2. 进入该文件夹，右键点击 git bash here,进入命令行界面

  1. 执行 npm install hexo-cli -g，安装成功如图所示

hexo的基本使用

hexo官网命令使用

Hexo 博客文件夹目录结构

node_modules: npm 下载的一下包

public：网站的静态文件

scaffolds：模板文件夹，即使用 hexo new、hexo draft时创建的文件模板

source： 存放创建的 md 文件

  • _post: 博客文件

  • _draft：草稿文件

themes： hexo 主题

_config_yml: 网站的配置文件

package.json: 应用程序的

注意：以下命令和操作都是在 博客目录下 执行的，除非特殊说明。对于本教程而言，是 D:\github_blog

hexo 初始化 hexo init

  1. 在刚刚打开的 git bash 中执行hexo inti,出现如图，说明初始化成功，hexo 可以正常使用
  1. 出现Error: EPERM: operation not permitted, mkdir xxxx，说明你的node.js没有安装在默认环境，按照安装node.js时提供的解决方法即可。

生成静态文件 hexo g

在刚刚的git bash 界面,输入hexo g 或者 hexo generate,生成默认的静态文件，

启动hexo 服务器 hexo s

在刚刚的git bash 界面中输入hexo server 或者 hexo s，即可启动hexo本地服务器。

默认情况下，可以访问http://localhost:4000/， 默认情况下出现

image-11.png
image-11.png

创建新的文章 hexo new

停止服务器，继续在git bash 界面中输入 hexo new "test" 创建一个名为 test 的 .md 文件，在当前目录的 source/_posts 目录下

再次启动服务器，打开默认页面，即可看见刚刚创建的文章

可以使用 Marktext 打开刚刚创建的test 文件进行内容编写。

注意：新建、删除或修改文章后，不需要重启hexo server，刷新一下网页即可，Hexo 会监视文件变动并自动更新。

清除缓存文件 hexo clean

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效。

那么先关闭hexo服务器，执行使用 hexo clean 之后再启动 hexo服务器

使用新的hexo 主题

对于默认的 hexo主题，不太好看，所以可以在hexo主题选择自己喜欢的主题进行下载。

image.png
image.png
点击 1 会转跳到该主题的github页面，可以进行下载，不同的主题有不同的下载方式。
image-2.png
image-2.png

点击 2 可以预览 hexo主题。

下载 hexo主题

hexo主题的下载一般分为两种方式：

  1. 在 github_blog 路径下，进入 themes 文件夹，之后打开 git bash，使用命令 git clone 主题链接。

  2. 使用 node.js 提供的node包管理器，下载对应的主题，在github_blog 路径下，打开 git bash ，使用命令 npm install hexo主题名。

此时下载的hexo主题，在 node_modules目录 下。

具体的下载方法，看主题的github页面。

替换hexo主题

  1. 这里以stellar主题为例，先下载主题。在git bash 界面中，输入 npm i hexo-theme-stellar ，出现下图说明下载完成
image-3.png
image-3.png
  1. 打开 node_modules目录 ，找到刚刚下载的 hexo-theme-stellar 主题，复制到 themes 目录下即可。
image-4.png
image-4.png
  1. 使用 记事本 或者 notepad++ 打开_config.yml 文件，按crtl + f，搜索 theme
image-5.png
image-5.png

  1. 将 theme: landscape 修改为 theme: hexo-theme-stellar

  2. 搜索 language ，将 language: en 改为 language: zh-CN，保存退出

  3. 打开 git bash 执行 hexo clean 和 hexo s，打开默认页面，即可看见

image-6.png
image-6.png

关于这个主题更多的用法查看：staller官网

让更多人看见你的博客

  1. 拥有一个github账号

创建一个github仓库

  1. 进入github，如下图所示，在首页的这个地方，仓库名：填入 自己github账号名.github.io
image.png
image.png
  1. 选择 public，然后点击创建即可，创建完成后会看见如图所示。
image-2.png
image-2.png
  1. 点击 https， 复制右边的链接
image-7.png
image-7.png
  1. 点击 settings ，选择 Pages ，设置 Source 和 Branch 为如下图所示
image-5.png
image-5.png

修改配置文件

  1. 打开 _config.yml 查找 deploy
image-3.png
image-3.png
  1. 修改为
1
2
3
4
5
deploy:
  - type: git
    repo: https://github.com/aericalao/aericalao.github.io.git # 注意要把地址改为自己的仓库地址
    branch: main
    message: "Build at {{ now('YYYY-MM-DD HH:mm:ss Z') }}"

下载部署插件

  1. 在git bash 界面中，输入 npm i hexo-deployer-git
image-6.png
image-6.png
  1. 执行 hexo d 部署网站，会弹出一个窗口，下图所示：
image-8.png
image-8.png
  1. 点击 Sign in with your browser 授权、登录github账号，出现下图所示，说明上传完成
image-9.png
image-9.png
  1. 如果在 hexo d 时 出现下图，说明是网络连接问题，可以关闭魔法，等弹出窗口后再开启。
image-10.png
image-10.png
  1. 此时可以访问 https://自己的用户名.github.io 了，虽然一片空白,
image-11.png
image-11.png
  1. 在git bash中，执行hexo g 生成网站静态文件到public文件夹
image-12.png
image-12.png
  1. 执行 hexo d 将生成的静态文件上传到github，下图所示代表成功
image-13.png
image-13.png
  1. 如果出现下图，说明上传失败，可以执行一下 git config --global http.sslVerify "false" 再进行 hexo d
image-15.png
image-15.png
  1. 再访问 https://自己的用户名.github.io
image-14.png
image-14.png

域名绑定（可选）

  1. 首先你得有一个 域名（没有可以参考 域名购买），这里以阿里云购买的域名为例。

  2. 注册一个 cloudflare 账号，使用 CF 的 cdn加速服务（也许是减速），ddos防护等，主要是对个人免费。

绑定cloudflare

  1. 进入cloudflare的主页后，点击页面中间的 添加站点；
image-2.png
image-2.png
  1. 在这里输入 自己的域名，点击 继续；
image-3.png
image-3.png
  1. 选择 Free的，然后继续，这时 Cloudflare 会自动扫描域名已有的 DNS 解析记录
image-4.png
image-4.png
  1. 由于域名是在阿里云购买的，所以DNS解析记录是阿里云的，所以需要将阿里云的DNS解析删除换成cloudflare的DNS解析
image-5.png
image-5.png
  1. 进入阿里云的 域名控制台，点击 管理
image-6.png
image-6.png
  1. 点击 DNS修改，点击右侧 修改DNS服务器，填入 cloudflare 提供的 DNS服务器
image-7.png
image-7.png

创建子域名

  1. 将 域名添加到cloudflare 之后，点击自己的域名，进入域名管理，点击 DNS ，点击 记录
image-8.png
image-8.png
  1. 点击右侧的 添加记录，选择 CNAME 类型 ，名称填入 自己的喜欢的子域名,如 www,blog,test等，名称填入 github名称.github.io,关闭代理，保存就行。
image-9.png
image-9.png

github pages 绑定域名

  1. 回到github pages页面中，在 Custom Domain 中 填入自己刚刚创建的子域名，点击Save保存
image-10.png
image-10.png
  1. 等待Github检查DNS解析，检查成功后（大概几分钟）刷新网页，如果发现Enforce HTTPS可以勾选了就勾选，此时你的页面就开启了https访问。就可以通过自己的域名访问自己的blog了。

待解决的问题

  1. 如何更好的适配.ipynb文件

  2. 添加评论区

  3. 优化网站

参考

使用Hexo框架搭建个人博客并托管至Github Pages

如何零基础创建一个属于自己的博客网站

Hexo配置

[使用 Hexo+GitHub 搭建个人免费博客教程（小白向）](使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎 (zhihu.com))

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

本站由 @Mogra 使用 Stellar 主题创建。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。