从零开始搭建博客

前言

之前我是把博客部署在GiteePages上，免费并且在大陆访问速度也不错。现在GiteePages的功能下线了，官方也没有给出明确的时间恢复。随着学习东西越来越多，自己的笔记越来越多，做个博客还是很有必要的，除了能记录下自己的生活和学习，还能把自己踩过的坑分享给别人，也是件不错的事😊。本文主打白嫖0成本即可实现，现在方案是把Hexo提交给GitHub仓库中，通过Cloudflare托管访问，实测访问速度勉强能用，域名是统一的xxx.pages.dev，也可以自己准备个域名在部署完成之后修改为自己的域名。这里在解释下为什么不直接部署在GitHubPages上，原因不用多说了，大陆几乎访问不了且在GitHubPages上部署仓库必须是公开的，出于个人信息安全考虑，使用cloudflare pages部署比较好。

搭建步骤

  1. 安装Git
  2. 安装Node.js
  3. 安装Hexo
  4. 注册GitHub
  5. 生成SSH秘钥添加到GitHub账号中
  6. 创建GitHub仓库，将hexo上传到GitHub仓库
  7. 注册Cloudflare并在Pages部署你的hexo博客(完成~~白嫖版😋)
  8. 设置个人域名(需要花钱)

安装Git

Git的官网国内访问速度超慢，我这已经有下载包的安装包，直接点击下载即可。
安装完成之后在命令行里输入 git --version 来查看一下版本验证是否安装成功。

安装Node.js

Hexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。
直接在官网进行下载，这里推荐下载“长期维护版”。
按步骤安装好后Win + R 打开命令提示符，再输入npm 回车，如果出现如图所示的帮助内容则说明npm安装成功且环境配置正确。

如果出现 node 不是内部或外部命令，也不是可运行的程序或批处理文件的提示，按照如下步骤来修复环境:

添加环境变量



然后一路“确定”，再重新测试环境即可。

安装Hexo

git和nodejs安装好后，就可以安装Hexo了，首先创建一个文件夹用来存放博客文件，然后进入文件夹，右键 Open Git Bash here
输入下面命令来安装Hexo

1
npm install -g hexo-cli

安装完后输入 hexo -v 验证是否安装成功
接下来构建Hexo,即初始化我们的博客，输入 hexo init folder folder替换成你的文件夹名字，例如我创建的叫hexoblog，执行完成如下图

1
hexo init hexoblog

1
2
3
4
5
6
7
8
9
<folder>
├── _config.yml     //主题配置文件
├── package.json    //npm文件
├── node_modules    //依赖包
├── scaffolds       //模板文件夹
├── source          //博客源文件
|   ├── _drafts     //可删
|   └── _posts      //存储你写的文章的文件夹
└── themes          //放置主题的文件夹

更换hexo其他主题和一些美化的配置这里就不做演示了，具体可以到Hexo的官方文档中查阅学习
这里再解释一下Hexo常用的几个命令，后面部署中会用到。

  1. hexo g ----- 生成博客静态页面(hexo generate)
  2. hexo s ----- 本地浏览博客(hexo server)本地浏览地址：http://localhost:4000
  3. hexo cl ---- 清理 hexo g 生成的内容(hexo clean)
  4. hexo d ----- 发布博客(hexo deploy)

注册GitHub

接下来就去注册一个github账号，用来存放我们的网站。大多数小伙伴应该都有了吧，作为一个合格的程序猿（媛）还是要有一个的。
国内访问github时好时坏，如果打不开网页，可能需要魔法来辅助下，具体操作方法可在科学上网一文中查阅。(校验码联系博主获取)

生成SSH添加到GitHub

注册GitHub账号后，我们回到桌面右键 Open Git Bash here ，然后输入下面命令:

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱，配置好之后创建SSH，输入下面命令一路回车

1
ssh-keygen -t rsa -C "youremail"

完成之后在C盘Users中的.ssh文件夹中找到id_rsa.pub，用记事本打开复制里面的秘钥。打开GitHub右上角点击头像Settings点击SSH and GPG keys创建一个新的SSH起个名字，把刚才的秘钥复制进去如图所示:

添加完成之后在git bash 输入下面命令，出现你的用户名，那就添加成功了。

1
ssh -T git@github.com

创建GitHub仓库，将hexo上传到GitHub仓库

打开GitHub，在右上角处点击New repository。
设置仓库名称(尽量不用使用中文命名)，属性选择私人仓库。这里说明一下因为我们要使用Cloudflare部署博客，需要把博客的源码上传到仓库中，出于对个人信息的安全考虑，所以设置为私人仓库。创建完成之后，复制git链接，建议使用SSH链接。

在除C盘外的任意盘根目录下，右键 Open Git Bash here 输入:

1
git clone git@github.com:yourname/example.git

这里把链接替换成你自己的用户名和仓库名，会自动下载仓库的文件夹，注意当前目录不要有和仓库同名的文件夹。
将之前博客文件全部复制到github仓库文件夹内如图：（PS：这里我复制的是我自己的博客文件）

git常用的几个命令：

  1. git init ----- 创建git仓库
  2. git add . ----- 将所有文件添加到暂存区
  3. git commit -m "更新博客内容" ----- 将暂存区内容添加到本地仓库中，"更新博客内容"是本次更新的内容描述
  4. git push -u origin master ----- 推送本地仓库到git仓库master

比如这次我对博客进行更新，进入到git仓库的文件夹，右键 Open Git Bash here 同步仓库时需要输入的命令就是：

1
2
3
git add .
git commit -m "更新博客内容"
git push -u origin master

如果不打算每次写commit，这里已经写好了一个快捷指令，下载放到博客根目录每次更新代码双击指令即可。

注册Cloudflare并在Pages部署你的hexo博客

没有Cloudflare的小伙伴先在官网注册好账号后，进入主页点击Workers和Pages，选择Pages连接到Git选择你的博客仓库

构建下配置内容，按照图中内容填写

添加环境变量NODE_VERSION ，NPM_VERSION ，值为你的电脑中nodejs和npm的版本号

最开始部署，大功告成，完结撒花😊！部署完成之后打开cloudflare给的链接即可看到你的博客啦~

设置个人域名

在你部署的项目中找到自定义域名

输入你要使用的域名，并在域名解析中添加一个cname解析，指向cloudflare pages分配的地址，就可以用你的域名访问博客了！
本文主要介绍0成本快速搭建博客，(主打白嫖哈哈😅)域名就不做过多赘述了网上有很多，腾讯云，阿里云都可以。感兴趣的小伙伴可以去了解一下。