静态网站搭建笔记 GitHub Page+Hexo

时间：2023-07-12 02:18:01 | 来源：网站运营

时间：2023-07-12 02:18:01 来源：网站运营

静态网站搭建笔记 GitHub Page+Hexo：Update: 2023.01.16.1

零、概述

目的：写东西。要求：简洁、高效、优美。

方法：个人GitHub仓库在开启GitHub Page设置后，用户可以得到一个域名为"用户名.http://github.io"的个人站点，而仓库会作为站点的免费服务器，适合拿来作为个人博客网站。选择Hexo博客框架作为搭建工具，通过Git部署至GitHub仓库。

过程：在Git bush终端里通过Hexo博客框架工具将本地编写好的Markdown文本生成本地网页文件，把这些网页文件用Git方式上传到GitHub里作为个人GitHub page服务器的仓库中，然后Github page会识别这些文件并在个人页面里显示出来。逻辑顺序：

安装建站环境（Git、Node.Js、Hexo） → 安装网站模板 → 配置网站（个性化） → 发布网站（GitHub）

一、创建本地环境和仓库

1. 安装Git

Git是先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。是用来管理你的hexo博客，上传到GitHub的工具。廖雪峰老师的Git教程。

下载地址 git download 安装后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。

选择需要安装的组件，默认即可，推荐勾选(NEW!) Add a Git Bash Profile to Windows Terminal

我使用VSCode作为默认编辑器（前提是先得安装VSCode）。

调整新存储库中初始分支的名称，默认的让Git决定即可，将会使用master作为默认的分支。

是否添加 Git 环境变量，推荐默认配置。

选择 OpenSSH 客户端程序，默认的使用 Git 自带的 OpenSSH 即可。

选择 HTTPS 传输后端，默认 使用OpenSSL 库 即可。

配置 Git 文件的行末换行符，默认的第一个即可。

配置终端模拟器，默认的第一个即可。

选择 git pull 合并的模式，默认的即可。

选择 Git 的凭据管理器，默认的跨平台的凭据管理器即可。

配置额外选项，默认的即可。

配置实验选项，直接点击 Install

安装完成。

配置环境变量(如果没有)，如下：右键此电脑 → 属性 → 高级系统设置 → 高级→“环境变量”→“系统变量”：编辑系统变量里的Path，新增：“C:/Program Files/Git/cmd”，如下：

安装完成后打开cmd输入

git --version检查安装是否成功，成功后会返回版本信息。

2. 安装Node.js

Hexo是基于nodeJS编写的，所以需要安装一下node.Js和里面的npm工具。下载地址 nodejs download 双击执行文件，单击下一步（选第一个“Node.js runtime”）→下一步（不勾选安装其他插件）→下一步。安装完成后打开cmd输入

node -vnpm -v检查安装是否成功，成功后会返回版本信息。

windows在git安装完后，就可以直接使用git bash来敲命令行也行。

3. 安装Hexo并部署本地仓库

新建一个本地文件夹“blog”作为仓库，随便什么名字，文件夹内右键“Git Bash”打开终端，执行以下步骤：

• 默认软件源网速可能比较慢，所以我们更换一个（非必须）：

npm config set registry "https://registry.npm.taobao.org"

• 安装hexo（全局）：

npm install hexo-cli -g如果报错，找到C盘下的用户目录删除隐藏文件.npmrc文件

检查hexo版本：

hexo -v

• 初始化hexo（这一步会将hexo的文件复制到你的博客文件夹中去）：

hexo init

• 安装其他插件：

npm install

• 设置用户名和邮箱：

git config --global user.name "GitHub用户名"

• 设置用户邮箱：

git config --global user.email "GitHub注册邮箱"这一步完成后你已经创建了一个本地博客，输入

hexo g命令生成hexo默认的静态页面，然后输入

hexo s命令启动本地服务器，在浏览器打开 http://localhost:4000/ 页面就可以看见自己创建的默认博客了。

二、安装主题（模板）

1. 安装主题

使用Git安装基于hexo框架的网站主题模板

所有官方主题：Themes | Hexo

一些受欢迎 的 Hexo 主题：HexoThe.me: Top 10 Hexo themes (voxel.site)

也可以从GitHub fork其他人优化配置好的主题。

我选的是Butterfly，在hexo根目录下运行：

稳定版安装：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly开发版安装：

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly应用主题：修改 Hexo 根目录下的 _config.yml，把主题改为butterfly

theme: butterfly安装插件：如果你没有 pug 以及 stylus 的渲染器，请在hexo根目录下载安装：

npm install hexo-renderer-pug hexo-renderer-stylus --save测试：检查主题安装是否成功

清除缓存：

hexo clean生成页面文件：

hexo g 启动本地网站服务：启动后在 http://localhost:4000/ 中查看应用好的主题。Ctrl+C关闭服务。

hexox s

2. 主题升级

在主题目录下，运行

git pull升级完成后，请到 Github 的 Releases 界面 或者 文档七 查看新版的更新内容。里面有标注 _config 文件的变更内容（如有），请根据实际情况更新你的配置内容。

为了减少升级主题后带来的不便，建议进行以下操作（非必须）：

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

注意： 不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml进行配置就行。Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

三、网站设置

1. 网站设置

网站的一些信息必须从博客根目录中的"_config.yml"文件配置，例如修改网站各种资料，例如标题、副标题和邮箱等个人资料 详见 配置 | Hexo

使用Hexo写作和发布网站需要用到的 指令 | Hexo

2. 主题设置

参考官网：Butterfly

3. 网页优化和扩展功能

到这一步为止我们已经有了一个成形的博客框架，剩下的事情就是往里面填东西，增加功能和使用的便捷性与美观程度。当然，最重要的还是我们创建博客的初衷——写作、记录、分享。

我的网站优化和维护细节会放在这篇文章中，持续更新：Hexo 个人博客优化日志 - 本站 (zhihu.com)

四、部署至GitHub（使用ssh连接）

1. 生成自己的github page

具体就是在github中建立一个仓库，仓库的名称为：

你的帐号名.github.io然后gigthub会自动为你创建一个个人页面，进入仓库，在Setting→Page可以看到这消息。

下面选个主题你就可以去自己的站看看了。

2. 生成ssh密匙

ssh-keygen -t rsa -C "GitHub注册邮箱"执行过程中会要求创建一个密码，可以回车默认空。

3. 将你的ssh公钥添加到github账户中

此时在你的用户文件夹中已经生成一个".ssh"文件夹，里面有刚刚出生的两个ssh密钥文件。"id_rsa"是本机的私人秘钥，"id_rsa.pub"是公共秘钥。用编辑器将"id_rsa.pub"打开，复制所有内容，然后打开你的github网页页面，点击用户头像→Settings→SSH and GPG keys→New SSH key→将复制的内容粘贴到Key文本框中，标题随意，仅作自己区分用。然后点击Add SSH key(添加SSH)按钮。

这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。总之，这一步的作用就是以后将本地部署至github仓库时候省去输密码的步骤。

• 检查连接

ssh -T -v git@github.com【注】如遇到下图情况，需要在第一次回车确认时输入"yes"再回车。

【注】遇到 "connect to host github.com port 22: Permission denied"多半是撞到杀软和防火墙。如果是端口问题，在".ssh"文件夹中新建"config"文件，输入以下内容，将接入端口设置为443。

Host github.com User 你的GitHub注册邮箱 Hostname ssh.github.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa Port 443更多问题可以看官方指南 使用 SSH 连接到 GitHub - GitHub Docs


4. 部署文件至GitHub Page

打开本地仓库的_config.yml文件，在文件最后一行找到以下字句并补充。

deploy: type: git repo: git@github.com:你的github帐号名/你的github帐号名.github.io.git branch: master这一步就是告诉hexo把你的文件推到你仓库中的哪个分支去。

【注】部署之前要先把github仓库里默认的branch："main"修改为"master"

• 安装deploy-git命令包（不安装就没法用部署命令）

npm install hexo-deployer-git

• 清除缓存文件

hexo clean就是清空上次部署时生成的文件，第一次不用输，以后每次部署前输入。

• 生成静态页面（hexo generate）

hexo g

• 部署（hexo deploy）

hexo d【注】当执行hexo deploy时，Hexo 会将public目录中的文件和目录推送至_config.yml中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容。

【注】遇到"ERROR Deployer not found: git"报错是因为部署插件没安装，再安装一下。

npm install --save hexo-deployer-git【注】最后显示"INFO Deploy done: git"就是完成部署，检查一下执行日志有无异常。第一次可能会遇到"warning: LF will be replaced by CRLF in ……"，这个问题，是因为windows中的换行符为 CRLF ， 而在linux下的换行符为 LF，所以出现符号转义问题，输入以下命令将自动转换关闭就行：

git config --global core.autoCRLF false

五、自定义域名（如果有）

进入仓库，点击Settings→Custom domain，输入你的域名。然后在本地博客目录"source"文件夹中创建一个名为CNAME的无后缀文件，填入自己域名即可。

【注】192.30.252.153 和 192.30.252.154 是GitHub的服务器地址（未证）

六、快捷命令以及步骤简化

适用于已经了解hexo命令以及相关代码的新手。

1建站

npm config set registry "https://registry.npm.taobao.org" && npm install hexo-cli -g && hexo init && npm install && npm install hexo-deployer-git && git config --global user.name "XXXXXXXXXX" && git config --global user.email "XXXXXXXXX" && ssh -T -v git@github.com【注】更换软件源→安装hexo→初始化hexo→安装其他插件→安装命令插件→配置github用户名→配置github邮箱→验证ssh地址

【注】在XXXXXXX处替换入相应内容。

更换主题

git clone https://github.com/iissnan/hexo-theme-next themes/next && cd themes/next && git pull【注】此处以【next】主题为例。下载主题→打开主题文件夹→上传数据。

【注】通常不同主题需要安装不同的支持组件，若未按要求安装则会导致页面报错。前往主题github仓库可以了解安装帮助。

Hexo三连（清除缓存、生成页面、部署页面。）

hexo clean && hexo g && hexo d

七、创建页面&发表文章

写文章是建站的初衷。

八、基本操作&BUG排查

1. Git 常用命令（此部分来自【前端学习】Git的安装和基本使用方法和环境变量配置 时光大魔王）

配置邮箱和用户名

因为Git是分布式版本控制系统，所以你需要自报家门

// 配置邮箱git config --global user.email "xxx"// 配置用户名git config --global user.name "xxx"// 配置好后检查一下git config --global user.emailgit config --global user.name初始化项目

执行命令后该文件夹将会多出一个 .git 文件夹，它默认是隐藏的，您可以通过开启系统的 文件管理器的显示隐藏的项目 来查看它

git init// 或：新建一个文件夹并在此文件夹里初始化git init xxx克隆远程项目仓库到本地

git clone "http://"查看git仓库的状态

显示工作目录和暂存区的状态。使用此命令能看到那些修改被暂存到了, 哪些没有, 哪些文件没有被Git tracked到等等

git status添加当前目录下的所有文件到暂存区

这是 必须的，在工作区（working directory）进行内容改动后，需要add操作，将文件添加到暂存区（index）。

git add .将暂存区内容添加到本地仓库中

git commit -m "这里是自定义的备注信息"【重要】以后每一次代码有意义的变更，都应该依次进行这两个操作

git add .git commit -m "这里是自定义的备注信息"将本地的分支版本上传到远程并合并，即：推送

git push懒人步骤

* 注意：若中途出现需要您输入账号和密码的弹窗，输入您的远程仓库的登录账号和登录密码即可！ *

// 配置邮箱git config --global user.email "xxx"// 配置用户名git config --global user.name "xxx"// 初始化项目git init// 克隆仓库到本地git clone "http://"// 这时候可以进行项目的修改了，修改好后，执行下一步 //// 添加当前目录下的所有文件到暂存区git add .// 将暂存区内容添加到本地仓库中git commit -m "这里是自定义的备注信息"// 推送到仓库git push

2. npm命令学习

npm install <Module Name> // <Module Name>指的是模块名 // install可以缩写为inpm install <Module Name> // 本地安装 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）如果没有 node_modules 目录，会在当前执行npm 命令的目录下生成node_modules / 目录可以通过 require() 来引入本地安装的包npm install <Module Name> -g // 全局安装 将安装包放在 /usr/local 下或者你 node 的安装目录 / 可以直接在命令行里使用# 如果出现以下错误：npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 解决办法为：npm config set proxy null

参考链接

Butterfly 美化/優化/魔改 教程合集 | Butterfly

我的Blog美化日记——Hexo+Butterfly | guole's Blog

guole's Blog

米奇妙妙屋 - ifibe ∞

最后这是我的小站 Chaosmoz - We are time fliers. 还在施工中，欢迎交流！