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

本文最后更新于 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日
许可协议