博客搭建教程

前言:

自己搭建博客的过程中踩到了不少坑, 也许是因为教程都太老了, 所以我写一个分享出来希望可以帮助到其他人, 有不对的地方或者不理解的地方请留言指出, 我会一一进行修改

这里只介绍部署在GitHub上的方法

注册GitHub:

1. 进入GitHub官网: https://github.com/

2. 点击sign up注册

3. 选择just me 和 student. 点击 continue

4. 任意选择或者不选. 点击 continue

5. 选择免费版即可, 付费也可以. 点击 continue

6. 到这个页面即为注册成功

新建仓库:

1. 点击 Create repository

2. 只填写仓库名称然后勾选"Add a README file"即可其他不用管, 命名规则为: “XXX.github.io”, "XXX"是你的用户名, 如下图:

3. 点击 Create respository即可完成创建

安装Git:

1. 进入Git官网: https://git-scm.com/

2. 点击Download

3. 选择对应版本下载安装即可

安装时记得将所有勾都选上后重启

Git绑定GitHub:

1. 输入 ssh 命令, 查看本机是否安装 SSH:

如上图所示, 即已安装 SSH. 输入 ssh-keygen -t rsa, 然后敲四次回车键, 之后就就会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub. 默认生成在以下目录：

• Linux 系统：~/.ssh
• Mac 系统：~/.ssh
• Windows 10 ：C:/Users/Username/.ssh

2. 依次输入如下命令, Windows需要在安装好的GitBash中操作, 打开即可

cd ~/.ssh 
ls
cat id_rsa.pub

3. 先将内容全部复制下来

4. 进入我们的github主页, 点击右上角头像, 点击"Setting"进入设置

5. 在左边找到 “SSH and GPG keys”, 点进去

6. 点击"New SSH key"

7. 标题随意填, 将刚才复制好的key粘贴到这里

8. 点击"Add SSH key"之后, 验证密码就可以了

Node.js和Hexo

这里用Hexo框架, 可以自行百度换其他框架

安装node.js:

下载地址: https://nodejs.org/en/

点击直接下载

详细安装教程, 针对Windows: https://blog.csdn.net/antma/article/details/86104068

安装完成可以用打开cmd检验一下是否安装成功，用 node -v 和 npm -v 命令检查版本

安装Hexo:

1. 创建一个文件夹用于放你的博客网站, 不要包含中文和标点, 下面我用文件夹 Blog 来描述

mkdir Blog

2. windows在git中操作, 可以在文件夹中点右键, 点"Git Bash Here"即可从对应文件夹进入Git

3. 使用cd命令切到你新建的文件夹

cd Blog

• 输入以下命令:

npm install -g hexo-cli

• 安装完成后输入:

hexo init

• 再输入以下命令进行部署:

hexo g

• 这时可以输入以下命令来本地查看页面:

hexo s

在浏览器输入: http://localhost:4000 即可打开部署的网页, 如果不是404网页不存在等则为正确

ctrl + c 停止运行服务器

将Hexo部署到GitHub:

1. 获取token

进入我们GitHub的"Setting"设置中

滑到最后点 “Developer settings”:

创建一个新的"Personal access tokens"

点击"Generate new token"之后可以只勾选repo也可全勾, 天数就默认就行

将创建好的token复制下来

2. 与GitHub建立关联

回到Blog文件夹中 (在"Blog"文件夹中右键然后点"Git Bash Here")

npm install hexo-deployer-git --save

用记事本工具打开Blog文件夹中的 _config.yml 文件

在文件底部填上(这只是一个格式):

deploy:
  type: git
  repo: https://ghp_jzxEGByW4j1222121eem2UWSIF@github.com/CrystronAI/CrystronAI.github.io.git # 你的token和git仓库地址
  branch: main
  token: ghp_jzxEGByW4j1222121eem2UWSIF		# 你的token, 至于为什么要多写这一个, 我当时就这样写了懒得去掉, 你可以尝试去掉

注意空格

仓库地址:

将https复制下来即为你的仓库地址

分别输入以下三条命令:

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

提交到github需要等待, 也有可能要提交很多次

完成以上所有操作以后就可以在浏览器输入 https://xxx.github.io进行访问, "xxx"为你的用户名

示例:

这是我的博客地址: https://erzbir.com/

因为我购买了域名, 网址会有点不一样

如果你看到这里, 且可以正常访问, 那么恭喜你已经有了一个自己的博客

设置Fluid主题:

进入Blog目录(与上面一样的操作)

在命令行输入下面命令:

npm install --save hexo-theme-fluid

完成之后依次输入以下命令:

hexo clean
hexo g -d

提交成功后主题就设置成功了

现在可以输入以下命令来创建文章:

hexo new post test

创建了一个叫"test"的文章, 可以使用编辑器, 用markdown语法编辑

找到对应文章用编辑器打开(最好下一个markdown编辑器, markdown语法可以稍后学习)

参照文档时参照对应主题的即可

这里是hexo-fluid的文档: https://fluid-dev.github.io/hexo-fluid-docs/

编辑好后在命令行进入博客文件夹(和上面一样), 输入以下命令进行发布:

hexo g -d

提交完成之后稍等几分钟就可以在页面中查看了

到这里完全可以使用了, 不过, 如果你想用自己的域名进行访问而不是"xxx.github.io", 请继续阅读

使用自己的域名:

购买域名:

这里推荐在: https://www.namesilo.com/ 购买, 上网问题自行解决

你也可以选择在腾讯云, 阿里云等购买, 但为什么不推荐我不想说理由, 用起来都一样

购买相信不需要教程

域名解析:

这里使用阿里云解析做演示, 其他网站都是一样的

登录阿里云, 进入"云解析DNS"控制台, 如果是别的网站购买的就需要先添加域名

点域名后的"解析设置", 添加两条记录

一条CNAME记录, 记录值填写你的github仓库的ip, 通过在命令行输入 ping 你的仓库地址 获得

例如:

ping CrystronAI.github.io

一条A记录, 记录值填写例如下图:

进入我们的在github上创建的仓库, 点"Setting", 然后点"page"

滑到最下面, 将域名填上之后点Save

这时就就可以通过你自己的域名访问了, 例如: https://erzbir.com/

到这里就结束了

---

关于主题美化, 以后再更新吧, 有什么问题都可以在关于页添加我的联系方式或者在下方留言区指出

邮箱: erzbir@qq.com