个人博客网站搭建教程

hexo搭建个人博客

本篇文章是基于windows环境的教程

• 1.工具准备

  • 1.1 安装node.js
  • 1.2 安装git
  • 1.3 安装hexo

• 2. 本地部署

  • 2.1 建立博客文件

• 3. 搭建一个github仓库

  • 3.1 注册一个github账号
  • 3.2 创建一个GitHub仓库

• 4. 配置ssh key

  • 4.1 配置流程
  • 4.2 验证是否配置成功

• 5. 上传博客

  • 5.1 修改配置文件
  • 5.2 上传

• 6. 其他问题

1. 工具准备

1.1 安装node.js

首先安装node.js，这个是hexo运行必须环境

node.js官网
版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本。推荐选择LST的版本

1.2 安装git

git用来把网站内容自动化部署到github

git官网

安装好之后检查一下是否安装成功
打开cmd（windows开始菜单右键，点击启动选项，输入cmd,就可以跳出命令台）

node -v
npm -v
git -v

npm是下载node带的。

如果以上命令都可以运行，说明安装成功

1.3 安装hexo

hexo官网
hexo 和上面两个安装方式不同，是通过npm命令安装的

打开cmd
在控制台输入以下指令

npm install -g hexo-cli

以上就把所需的工具基本安装完毕。

2. 本地部署

这一步在本地通过hexo生成好网站模板文件，并且在本地可以预览网站界面

2.1 建立博客文件

选择一个文件夹用来存放我们的博客文件
注意，这个文件夹必须是空的!

在任意文件夹右键，点击Open Git Bash here(win11右键后点击”显示更多选项”就能看到)

输入

hexo init

如果不可以输入

npx hexo init

等待一会，完成之后依次输入以下代码

hexo g
hexo s

hexo g 是生成用的，使用之后它会自动对修改过的网页进行生成，对修改过的内容进行记录，确定每次上传的内容，每次对配置和文件进行修改后最好都进行hexo g一次

hexo s是本地部署用的，使用hexo s之后，在浏览器输入http://localhost:4000/ ，可以本地浏览网页的样式，ctrl + c 结束本地服务器

上面就是hexo模板样式

3. 搭建一个github仓库

3.1 注册一个github账号

github官网

3.2 创建一个GitHub仓库

登录GitHub账号
右上角有一个 + 号，”Create new…” –> “New repository”

点击”New repository“进入

在Repository name里面填写你项目的名称
填写格式为 username.github.io
username是github的用户名，这样可以在没有域名的前提下用GitHub给的域名来访问

Choose visibility设置为public

然后点击Create repository，这样就成功建立起仓库了

4. 配置ssh key

这个步骤是为了让git可以自动化部署GitHub，相当于让git登录上GitHub，这样git就可以管理你的项目了

4.1 配置流程

在任意文件夹右键，点击Open Git Bash here

输入

ssh-keygen -t rsa -C "邮箱地址"

这里邮箱地址是用来接受信息的，如果在后面通过git来更新你的文件出现问题，填写的这个邮箱就会接到出现问题的消息。

输入完代码，cmd会等待输入回车键，有的教程说按4次回车键，我好像只需求3次
不过只要出现The key’s randomart image is 然后下面出现一个字符画，就说明成功了

接着打开文件夹C:\Users\admin.ssh （这里admin是你电脑的用户名）
打开id_rsa.pub文件(可以用word打开)，复制里面全部内容

进入GitHub的个人设置界面(找不到直接点击我设置的链接)
找到 SSH and GPG keys，点击**”New SSH key”**

Title可以随便填，然后把刚才复制的内容全部粘进Key里面，点击Add SSH key

返回之后的界面是这样的。

4.2 验证是否配置成功

打开cmd，输入

ssh -T git@github.com

询问 yes/no/[fingerprint]，输入 yes
出现successfully，这样就说明成功配置SSH了

5. 上传博客

现在已经完成本地部署和仓库建立，我们需要把网站上传到仓库

5.1 修改配置文件

找到我们存放文件的目录，我们把当前目录视为根目录
在根目录里面找到 _config.yml 打开文件

这里title是你网站的标题，可以改成自己设置的标题
subtitle是网站的子标题，也是自己填
author会在页脚显示出来，可以设成自己的名字
language是网页默认语言，改成中文zh-CN
url你填自己的域名，https://username.github.io username是你项目仓库起的名字，不设置也会自动设置

你可以先暂时不填以上内容，一定要配置好下面的内容

把deploy下面改成

deploy:
  type: git
  repository: https://github.com/username/username.github.io.git
  branch: main

repository这一项在项目仓库主页可以找到

点击code，把里面的链接复制填到repository里面

注意，冒号后面一定要有一个空格！

这样我们就设置好配置文件了

5.2 上传

接下来hexo g 生成，hexo d上传

如果hexo d出现以下问题

输入

npm install hexo-deployer-git --save

就可以解决hexo d报错问题

在hexo d运行的时候，会让填一些信息，用户名和邮箱一类的，就是刚才那个可以跳过的，如果没有，就回到刚才的地方修改

同时会弹出一个弹窗，让把GitHub授权给git，按操作同意就行。

上传之后等一会，就可以通过https://username.github.io 进行访问了，username改成设置的

6. 其他问题

• 如果出现404，检查你的仓库名有没有出现错误，是否是和你用户名一样
  如果一样，等待一会就会出现

• 如果无法加载，大概率是国内把GitHub墙了，DNS没法加载解析域名
  需要买一个国内域名，利用 vercel 加速

• 根目录source文件夹是用来放资源内容的，写的博客也是放在里面 _posts 文件夹的

• 根目录theme文件夹是用来放主题的

• hexo new ”文章名“ 可以创建新的文章，是一个md文件

• hexo new page pagename (无双引号)可以创建一个新的页面 ，同时要在配置文件里面加上

• hexo config theme themename (无双引号)可以应用主题，也可以在配置文件里面改

• 可以在hexo官网下载主题，关于主题的应用方法每一个主题的制作者会写清楚