记录一下博客搭建历程

本文最后更新于:2020年10月17日 下午

前言

19年8月份开始部署自己的独立博客到现在已经过去了10个月了,这期间断断续续做了很多修改,也踩了很多坑。这几天换了个域名,换了个主题,完全重新部署了博客,现在用起来感觉还不错,应该会持续用一段时间,所以现在写这篇文章总结一下博客部署的细节过程,避免我这个记性不好的人过段时间就不记得自己是怎么操作的了😂,网上有很多大佬写的Github Pages + hexo部署博客的教程,我这里主要是记录我自己的操作步骤和一些我自己的理解。我不是一个专业的前端程序员,所以如果在看这篇文章的大佬发现了错误,请指出。

最早部署博客的时候,我还是一个大一的学生,很多东西都不太懂,在网上看了很多关于部署博客文章,明白了部署博客的方法之一就是用现有的框架,然后自己做个性化的调整,找了一圈发现目前比较流行、搭建简单适合我这个蒟蒻的框架是hexo,看了官方文档和其他大佬的搭建教程,就开始找好看的主题了,去年部署使用了闪烁之狐大佬的matery主题,作为一个喜新厌旧的渣男这么几个月过去了有一些视觉疲劳了😂,现在改成了zkqing大佬的Fluid,这个简洁又有设计感的风格,很是喜欢。

hexo是一个基于nodejs的静态站点生成框架,不仅搭建简单,还可以将生成的博客直接上传到githubgitlabgitee这些提供Pages服务的平台(下面会对Pages服务做介绍)服务建立静态站点,而且社区生态活跃,有大量有趣实用的插件可供下载。通过hexo,即使我们不怎么会HTML也可以用markdown写出工整的文章,markdown是一种轻量级的标记语言,文件扩展名是“md”,就是在项目文件里常见的README.md文件使用的格式。markdown的语法超级超级超级简单,没有哪个正常人20分钟还学不会基础语法的吧,不会吧,不会吧。话说回来markdown只是一个语法规范,所以我们还需要一个工具来辅助我们编写markdown文件,强烈推荐Typora,不用像vscode那样分屏预览,所见即所得的书写体验是真的awesome。

“You can create a website directly from a GitHub repository.”,这是Github Pages官方文档里面的介绍,我们可以直接从Github仓库创建静态网站,通过Github Pages,我们就可以不用自己维护一台服务器来托管博客,省钱又省心。

全程使用的是window10环境。


准备工作

安装nodejs

在这里下载适合自己的nodejs

安装过程一路next就可以了,但是如果你觉得不放心那就自己选择。

安装完成后打开终端,输入:

node -v
npm -v

看到输出版本号就可以了。(-v改成--version也是一样的)

npm是nodejs默认的包管理工具,我们需要用npm来安装hexo以及一些插件。

添加国内镜像

如果没有梯子的话,可以使用阿里的国内镜像下载,这样速度会好很多。

npm config set registry https://registry.npm.taobao.org

这条命令会写入https://registry.npm.taobao.orgC:\%USERPROFILE%\目录下的.npmrc文件,也可以直接用文本编辑器编辑.npmrc文件。


安装Git

Git是当今最流行也是最好用的版本控制工具之一,我们在这里使用Git是为了把本地生成的静态页面推送到github(也可以使用其他平台,或者同时使用)。

在这里下载适合自己的Git

安装过程还是一路next就可以了,但是如果你觉得不放心那就自己看着办。

安装完成后打开终端,输入:

git --verison

添加代理

git没有国内镜像(这个要是有国内镜像那是真的强/狗头),如果没有梯子的话,那git clone可能会很慢,有梯子可以设置一下代理,如下:

全局代理

# socks5协议,1080端口修改成自己的本地代理端口
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080

仅代理github

# socks5协议,1080端口修改成自己的本地代理端口
git config --global http.https://github.com.proxy socks5://127.0.0.1:1080
git config --global https.https://github.com.proxy socks5://127.0.0.1:1080

上面的命令会在C:\%USERPROFILE%\目录下的.gitconfig文件写入

[http "https://github.com"]
	proxy = socks5://127.0.0.1:1080
[https "https://github.com"]
	proxy = socks5://127.0.0.1:1080

用编辑器写入也是可以的。

连接Github

配置个人信息

打开git bash,输入如下命令,注意替换用户名和邮箱。

git config --global user.name "username"
git config --global user.email "email"

写入的和前面添加代理的是同一个配置文件,同样也可以用编辑器写入。

[user]
	name = username
	email = email

生成SSH

执行如下命令

ssh-keygen -t rsa -C "email"

这个命令会在你的用户文件夹下的.ssh文件夹下生成id_rsaid_rsa.pub文件,前者是你的私钥,后者是公钥,接下来就是把公钥提交到Github上,这样就可以安全的传输了。

使用命令cat ~/.ssh/id_rsa.pub,或者用编辑器打开id_rsa.pub文件都可以,复制里面的全部内容。

回到github,点击如下图所示的setting,然后点击SSH and GPG keys

ssh

然后点击New SSH Key,名字自己决定,内容就粘贴刚刚复制的公钥。

最后执行下面的命令查看是否成功

ssh -T [email protected]

check

如上图所示,输出了Hi username!,那么就成功了。


创建博客仓库

不会还有人需要注册github的详细步骤吧,不会吧,不会吧。

在github首页点击右上角的+号,选择New repository

新建仓库

然后在如下页面中填写仓库名(Repository name)

**一般这里的格式都是且必须是username.github.io (username就是前面Owner里面显示的名字)**,原因如下。

仓库名命名为username.github.io那么访问通过该仓库创建的博客的默认域名就是username.github.io

仓库名命名为xxx.github.io,访问地址就是username.github.io/xxx.github.io

我的username是oopstls,但是这里我用sameple.github.io作为样例。

Description是对这个仓库的描述。

后面的README一定要勾选,不然后面不能初始化Github Pages。

Imgbot是我用来给我的github图床里面的图片压缩的,没有使用过就没有这个选项,不影响后序操作。

然后点击下面的绿色按钮Create repository

创建博客

然后点击仓库的setting

setting

向下翻找到Github Pages,点击choose a theme

choose a theme

然后直接点击select,不用去选主题了,这里只是通过选主题激活Github Pages

select

然后在刚刚Github Pages设置的位置就会显示你的默认链接。

点击进去就是Github Pages为你生成的个人页面。


安装初始化Hexo

安装Hexo

打开一个已经配置好可以执行npm命令行终端,可以直接用前面安装的git自带的Git Bash。

输入如下命令安装hexo命令行工具

npm i hexo-cli -g

install

输入命令后如上图所示就安装成功了,也可以再输入命令hexo -v看看。

初始化Hexo

在你想用来存放博客文件的存储路径上新建一个文件夹,这个文件夹用来存储博客文件,比如D:\Blog\

然后再这个目录下打开终端,或者cd /d/blog(注意这里是我的目录路径,以当前自己的为准,不能随意复制)

然后执行下面这条命令初始化你的博客文件。

hexo init sample 

sample是生成后存储文件的文件夹

INFO

命令执行完成显示上图所示内容就可以了。

接着就执行npm install安装必要的组件。

npm install

安装完成没有报错的话,那基本环境就配置好了。

介绍几个后面会常用的命令,也可以在官方文档查看更多。

hexo clean #清除已经生成的静态站点文件,最好每次生成之前都clean一下
hexo generate #生成静态站点文件
hexo g #上一个命令的简写
hexo server #启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo s #上一个命令的简写
hexo deploy #部署网站,需要先generate生成静态文件才能部署
hexo clean && hexo g && hexo s #本地测试的时候可以这么写

现在执行hexo g && hexo s

然后打开浏览器,在地址栏输入localhost:4000,就可以看到初始博客页面了。

local

目录结构

根目录

├── _config.yml				#博客配置文件
├── node_modules			
├── package-lock.json
├── package.json
├── scaffolds				#草稿、文章模板、页面模板
├── source					#资源文件夹
└── themes					#主题文件夹

source目录下

没有的文件夹不是自动生成的,而是推荐使用方式(后面介绍)

├── source
│   ├── CNAME							#自定义域名
│   ├── _data							#覆盖主题配置
│   │   ├── fluid_config.yml			#fluid主题覆盖配置
│   │   └── fluid_static_prefix.yml
│   ├── _posts							#文章存储文件夹
│   │   └── helloworld.md
│   ├── about							#自定义关于页
│   │   └── index.md
│   └── img								#作为主题的图片资源文件夹
│       ├── avatar.png
│       ├── banner
│       ├── favicon.png

个性化

更换主题

前面hexo初始化完成之后,默认使用的是landspace主题。除了自带的主题外,hexo官网还罗列了很多好看的主题可供查看和使用。

image-20201014164742396

选择自己喜欢的主题,下载至/theme文件夹,然后再/_config.yml文件中修改theme: landspace,将landspace改为主题存储的文件夹名。

在hexo5之后,可以直接使用npm命令下载主题,但是下载的主题是存放在/node_modules文件夹下的,需要自定义修改一些东西的时候不是很方便(只改配置文件可以在/source/_data/下覆盖主题配置文件)。

不同的主题配置方式各不相同,hexo官网列出的主题大多都有较详细的配置说明,可以在主题的github仓库查看README.md文件。

我现在(至文章最后一次更新)使用的是Fluid,主题安装过程以及配置过程就不具体演示了,官方说明非常详细

生成以及上传

前面已经介绍过博客的生成命令。

这里再贴一下。

hexo clean #清除已经生成的静态站点文件,最好每次生成之前都clean一下
hexo generate #生成静态站点文件,生成内容在根目录下的public文件夹内
hexo g #上一个命令的简写
hexo server #启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo s #上一个命令的简写
hexo deploy #部署网站,需要先generate生成静态文件才能部署
hexo clean && hexo g && hexo s #本地测试的时候可以这么写

hexo deploy需要先安装对应平台的deploy插件

如github pages,需要执行下命令安装插件。

npm install hexo-deployer-git --save

当本地测试完成之后,执行hexo d即可上传至仓库。

绑定域名

github pages默认的域名是username.github.io

建议改为自己的域名的几个原因:

  1. 不够个性化
  2. 不能做cdn加速(国内访问gituhb.io很慢)
  3. 上一条说访问慢,现在貌似已经被墙了(202008xx),不改域名想访问只能修改自己本机的DNS。

购买域名

在国内几个大厂都可以购买,如阿里云、腾讯云、百度云…

购买域名的详细过程大概就是实名、选域名、买域名。

无脑操作,具体过程就不赘述了。

Cloudflare

我这里以阿里云为例

注册cloudflare

注册过程就不详细展示了

添加站点

image-20201014174143276

image-20201014174633561

填写购买的域名,然后点击添加站点,然后无脑下一步,直到提示修改DNS服务器。

修改DNS服务器

打开阿里云域名控制台,点击准备好的域名。

image-20201014175006245

然后点击DNS修改、修改DNS服务器

image-20201014175611777

将刚才Cloudflare给出的两个域名解析服务器粘贴至这里。

image-20201014181139698

点击确定之后返回Cloudflare点击检查。

等cloudflare检查完成之后执行下面的操作,这个过程会等几分钟到几个小时不等。

解析加速

上面点击DNS,然后添加记录,两个记录都是CNAME,分别填入域名和www。确定后面的代理状态为开就可以了。

image-20201014180747647