搭建一个属于你自己的博客（每日连载更新中）

本文最后更新于 2024年1月29日 晚上

现在关于搭建个人博客，网上有很多教程，但是我在跟着那些教程走时遇到了很多奇奇怪怪的问题，对于一些不是很熟悉电脑的人来说，这些问题解决起来可能会比较困难，于是便有了这篇文章，排掉笔者遇到的雷，手把手教你搭建一个属于你自己的博客。
跟着本文的教学，你将得到一个基于hexo框架的博客，并且通过Github Page免费发布网页，最终使用Netlify在你的Git仓库中触发自动化的构建和部署流程以确保代码的更改能快速上线。
前排提醒：构建一个个人博客是一件很酷的事，但也不是一件容易的事。如果你已经下定决心，就请做好遇到各种抽象问题的准备，继续看下去吧
笔者的开发环境：.yml、.md皆使用vscode编辑（并非广告，只是单纯推荐，赞美传说中的宇宙第一编辑器！）

1. 安装Git和Node.js

1.1 安装Git

进入以下网址
https://git-scm.com/downloads
点击右侧的Download for Windows，然后选择合适的版本（一般是Standalone Installer下方的64-bit版）下载安装即可。
安装时，如果你不是很熟悉Git，不需要进行一些特别个性化的配置，就只要一路无脑“下一步”，最后安装即可。
完成后打开命令行，输入 git --version 命令并且回车，如果有输出版本信息即说明安装正确。
命令行的打开方式：点击开始，搜索栏中搜索cmd,选择“命令提示符”即可
如果你对Git比较感兴趣，想进一步学习，笔者推荐以下教程（非广告，只是笔者学习的时候，感觉这个最浅显易懂）
https://www.liaoxuefeng.com/wiki/896043488029600

1.2 安装Node.js

进入以下网址
https://nodejs.org
安装那个Recommanded For Most Users的版本（当然，如果你头铁非要体验最新版本也行，但是不保证不会出问题（）），安装时也是无脑“下一步”即可。
完成后打开命令行，输入 node -v 命令并且回车，有提示即安装正确。

2. 安装hexo

2.1 安装

创建一个文件夹用于存储博客的本地文件（我个人是放在了磁盘根目录，感觉比较保险），并且双击进入文件夹。
在文件夹空白处右键鼠标，点击“显示更多选项”，接着点击Open Git Bash Here,这时候会出现一个弹窗，这个就是当前文件夹下的Git命令行，弹窗上有一行文字显示了当前的电脑用户以及Git命令行所属的路径，为了后面叙述方便，我们将这一行命名为命令头（只是我为了叙述方便随便起的，不是严谨的命名）。
接下来你需要做的是在现在这个Git命令行中依次运行以下5条命令： 

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

（命令运行完成的标志是重新弹出来一行命令头，请务必等一条命令运行完成后，再输入新的命令）

2.2 hexo中的常用命令

以下命令现在不需要运行，只是列出来介绍以下，之后我们会用到。

命令 用途
hexo g 生成网页静态文件
hexo cl 清空静态文件
hexo s 在本地运行网页
hexo d 将网页部署到网站
hexo g -d 生成静态文件并部署到网站
hexo new 文件名 创建新文章

3.搭建网页框架

3.1 选择并配置框架

进入以下网址选择心仪的模板主题，点击主题的名称即有非常详细的配置教程，跟着配置即可。
https://hexo.io/themes/

3.2 生成并预览静态文件

配置好网页主题后，如果想要预览网页效果，可以通过以下步骤实现：

  1. 打开博客本地文件夹中的blog文件夹，在此文件夹下打开Git命令行
  2. 运行hexo g命令以生成网页静态文件
  3. 运行hexo s命令以本地运行网页，在弹出来的内容中，按住ctrl点击“INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.”中下划线部分（笔者这里得点击“4000”才行），即可
  4. 预览完后，请在Git命令行中使用Ctrl+C以终止运行，并且关闭Git命令行

4.配置SSH密钥

首先你得有一个github账号，如果没有请自行注册，这一步应该很简单也没啥困难，笔者就不展开详细写了（）
！！！注册Github用的邮箱建议用常用邮箱！！！

4.1 创建Github仓库

注册完以后，回到主页，点击左侧的new新建仓库，名称为<user>.github.io，（<user>可自由更改为其他文本，后文<user>处的内容必须与此处一致，但是.github.io不能改，这个仓库的名称将是之后你的博客的域名），接着点击Create repository完成创建。

4.2 更改服务器SSH端口

这一步很多教程里面都没有写，笔者在配置SSH时，由于系统默认的SSH端口为22，一些加速器等可能会禁止22端口进行访问，所以出现了Connection closed by remote host的情况，因此在这里建议修改一下。

  1. 打开“此电脑”，点开上方的“查看” -> “显示”，确认勾选了其中的“文件扩展名”
  2. 打开C:\Users\用户名/.ssh
  3. 新建文本文档，其内容为
1
2
3
Host github.com
Hostname ssh.github.com
Port 443

保存文本内容后退出。
4. 重命名该文件名为config，注意：此文件无扩展名！一定要删除“.txt”

4.3 获取SSH密钥

在命令行中输入以下命令

1
ssh-keygen -t ed25519 -C 注册Github时的邮箱

然后添加到SSH-Agent

1
2
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

接着使用以下命令复制SSH密钥，建议复制完以后先粘贴到别的地方备用，下一步会用到。

1
clip < %USERPROFILE%\.ssh\id_ed25519.pub

4.4 添加SSH密钥

Github中点击右上角头像中的Setting，接着点击左侧SSH and GPG keys，然后点击右上角的New SSH key，把刚刚复制的SSH密钥粘贴到key中，title不用写，点击Add SSH Key 添加密钥。
打开命令行，输入以下命令来检测SSH密钥状态，如果显示You’ve successfully authenticated，则说明配置成功。

1
ssh -T git@github.com

5. 部署到Github Pages

5.1 初始配置

在命令行中使用以上命令完成初始配置，<user>和<email>处分别替换成上文你写的<user>和注册github时的邮箱 

1
2
git config --global user.name "<user>"
git config --global user.email "<email>"

5.2 配置_config.yml

将你的_config.yml文件中的对应内容改成以下内容，<user>处的内容依旧改成先前同样的。 

1
2
3
4
5
6
url: https://<user>.github.io/
deploy:
    type: git
    repo: git@github.com:<user>/<user>.github.io.git
    branch: master
    message:

更改完毕后保存并退出。

5.3 安装部署插件

输入以下命令安装部署插件，以便部署到Github Page 

1
npm add hexo-deployer-git

6. 使用Netlify加速访问和自动化部署

6.1 注册

进入以下网址注册一个Netlify账号，通过Github注册

https://app.netlify.com/

6.2 关联Github

注册成功后会自动跳转到你的首页，点击Add new site中的Import an existing project，点击GitHub，与 GitHub 关联。

6.3 上传博客

关联 GitHub 后，下方会出现你 GitHub 中的仓库，点击你创建的博客，接着点击Deploy site上传。

6.4 更改域名

上传完毕后回自动跳转回到项目的首页，选择Site settings，接着往下滑，点击Change site name更改你网站的域名。
这个域名其实是你之前<user>.github.io的“别名”，但是通过Netlify加速的域名与原生域名相比：延迟更小，访问更快，所以笔者一般使用Netlify提供的域名。

7. 完成辣

现在你拥有一个属于你自己的博客了！那么该如何创建博文并且发表在你的博客上呢？
别急（），疯狂码字更新ing……

一些正经的东西
#寄术
搭建一个属于你自己的博客（每日连载更新中）
http://flucloud.netlify.app/2024/01/27/搭建一个属于你自己的博客/
作者
渔歌子
发布于
2024年1月27日
许可协议