前言

很久之前在网上看到别人自己的博客网站,感觉很好看。等到有时间,便自己也搭建了一个自己的网站,就好像自己的一个小空间,里面可以放些自己的内容。自己在搭建过程中也遇到了很多坑,所以结合自己搭建的过程,在这里记录一下。

环境准备

GitHub注册

要现在github注册一个账号,并且需要记住的用户名以及邮箱(后面会用)

Nodejs环境

Hexo是一款基于nodejs的博客框架,所以首先需要先安装nodejs。

Node.js — Run JavaScript Everywhere (nodejs.org)在这里下载。

下载之后使用Win+R进入cmd去验证是否安装成功。

# nodejs安装后,该命令会显示nodejs的版本号
node -v
# 还有很重要的一个npm安装,通过该命令可以显示npm的版本号
npm -v

Git环境

在Git的官网进行下载。Git (git-scm.com)

傻瓜式安装即可。

通过一下代码检查是否成功(Win+R,输入cmd)

git --version

在桌面鼠标右击可以看到这个选项

Git是分布式的版本控制系统,需要将用户名和邮箱设置为标识,点击Git Bash Here后输入如下内容:

git config --global user.name "user_name" # user_name 填GitHub的用户名
git config --global user.email "user_email" # user_email填GitHub注册的邮箱

比如我的用户名为wsj,注册邮箱为wsj111222@gmail.com(后文以此为基础演示),那么就需要填入以下内容:

git config --global user.name "wsj"
git config --global user.email "wsj111222@gmail.com"

搭建GitHub博客

注:这里新建仓库时,需要注意仓库的分支,如果默认分支和之后配置站点文件的分支不同会出现预览和实际不同的问题,见问题2因为master容易带有侮辱性色彩,所以这里建议使用main分支,也建议在建仓库前修改默认分支为main。(后文配置站点文件以main为例)

  • 修改全局默认分支右击头像->Settings->Repositories,修改default branch为main。
  • 修改单个仓库默认分支,点击仓库,在仓库中点击Settings,在general中修改default branch为main。

去GitHub上新建一个仓库,仓库命名一定命名为 username.github.io,username替换为自己实际的用户名,比如wsj.github.io,并且选择为public。

配置SSH key

点击Git Bash Here,输入以下命令:

ssh-keygen -t rsa -C "user.email" # user.email为GitHub注册时的邮箱

# 例如
ssh-keygen -t rsa -C "wsj111222@gmail.com"

连续按回车,不需要手动输入任何东西。

打开C:\用户\用户名下找到.ssh文件。使用记事本打开id_rsa.pub文件,将其内容全部复制。

紧接着在GitHub中点击头像,在settings中找到SSH and GPG keys,点击New SSH key。

将刚才复制的内容全部黏贴到Key中,Title可以任意填写。

注意:id_rsa.pub是公钥,可以给别人,id_rsa是私钥,不可泄漏。

此时,在Git中验证公钥配置是否成功,右击打开Git Bash here,输入

ssh -T git@github.com

配置成功显示如下:

本地配置Hexo

在电脑的文件夹中新建一个文件夹,用于存放博客的相关内容,命名、存放目录随意。如我在E:\My Blogs创建。

安装hexo

进入该目录即进入E:\My Blogs,打开Git(右击Git Bush here),输入以下命令

npm install -g hexo-cli

初始化hexo

# 输入命令
hexo init

初始化成功后会提示:

init successful:
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

初始化成功后也会在目录中多出很多文件。

配置站点文件

在hexo中根据_config.yml文件进行配置。在根目录下的 _config.yml文件称为站点配置文件,即(E:\My Blogs\ _config.yml),使用不同主题时也会有配置文件,会位于E:\My Blogs\themes文件夹下,称为主题配置文件。

现在打开根目录下的站点配置文件,在最后找到deploy:修改其中的内容。

repo可以进入仓库,点击code,选择SSH或者HTTPS进行复制。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  # 这里使用了SSH配置(推荐)。如果使用https,则是https://github.com/owner/username.github.io.git
  repo: git@github.com:owner/username.github.io.git    
  branch: main

注:这里的branch是main还是master,应该根据自己的默认分支走,但是建议选择main,2020年10月1日后master正式由main取代,master容易带有侮辱性色彩。如果这里的branch没有设置正确,容易踩坑见问题2

生成静态文件

在Git中输入以下命令:

Chexo g  # 生成静态文件

执行完该命令,Hexo 就会在 public 文件夹中生成相关的 html 文件,这些文件将来都是要提交到 GitHub 上的 username.github.io 的仓库中去的。

预览主题

在Git中输入以下命令:

hexo s

打开浏览器访问 http://localhost:4000 即可看到内容C

我这里第2行是因为使用了主题,不会影响预览。

安装部署工具

部署到GitHub使用hexo d命令,但是在此之前要先安装一个部署插件

npm install hexo-deployer-git --save # 安装部署插件

部署到GitHub

输入

hexo d

部署成功后,在浏览器中输入username.github.io,例如wsj.github.io,就可以进入自己的博客啦!

我遇到的问题

问题1:

在hexo初始化,即hexo init过程中出现

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': Failed to connect to github.com port 443 after 21055 ms: Couldn't connect to server
WARN  git clone failed. Copying data instead
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html

可能是网速问题,解决方法:可以多次尝试hexo init解决。C

问题2:

我第一次配置时,明明使用hexo s预览没有问题,但是进入username.github.io中却没有变化(可以区分清楚不同分支者可以跳过此问题,此问题对于新手来说建议博客仓库中有一个分支)。

最后的原因就是因为branch没有配置正确,默认分支为master,而实际配置站点分支为main。

解决方法:删除仓库以及博客文件夹,重新配置。

问题3:

LF will be replaced by CRLF

Git中提示warning: LF will be replaced by CRLF in

执行:

git config --global core.safecrlf false

参考文章

Hexo+GitHub搭建个人博客教程(2023最新版)_hexo github个人网站教程-CSDN博客

GiHub + Hexo 真·从零开始搭建个人博客 - Fany Full’s Blog

关于hexo更新到GitHub后博客内容未变问题_hexo 部署到gitee 已经部署了 但是博客没更新-CSDN博客