前些天想搭个博客,记录各种各样的事,如今基本上完工力!happy!
所以写了这篇文章把整个流程梳理一遍,为了让后来的小伙伴们能轻松一点(网上一些教程只列出了步骤,跟着做的时候难免有些懵逼),所以我会尽力说明每个步骤是在干嘛,要达成一个怎样的效果。那么,开始吧!

本文写作上尽量按照通俗的标准去写,细节上可能存在不严谨的地方,如有错误请一定要联系我,我会及时更正。另外我搭建博客的过程主要是参考了@云游君的文章,遇到问题也可以去这里看看。

准备工作

做一件事之前,一定要明白要达到一个怎样的效果,搭建博客也是如此,比如我希望输入网址能访问到我的博客,博客里能存放我的文章相册,文章下面游客可以评论,而我可以自由的编辑和发布博客的内容,当然了还希望搜索引擎能收录等,对着这些需求,我们再来看如何实现他们。这里我们会用到一些工具,你可能完全没有听说过他们,但没关系,不用害怕,我在搭建这个博客之前连git都不会用,也没有任何前端知识,最后也还是完成了。(作为一名计算机大三学生也太丢人了:)

注册GitHub

相信大家都知道,在浏览器里输入域名就能访问到对应的网站,浏览网站里的内容。

那么问题来了,网站的内容总得有个地方放吧?这个地方一定得和域名相关联吧?对的,访问网站的一部分过程就是通过域名找到这个放网站内容的地方,我们的博客也是如此。

为了让人人都能访问,我们需要一个域名,同时也需要一个存放网站内容的地方。

那你可能会问,这是不是就要买域名和服务器?没错,我们需要域名和服务器资源,但不一定非得购买,白嫖也是一种解决问题的办法。

GitHub为广大的开发者提供了名为GitHub Pages的网站解决方案,我可以利用GitHub Pages来搭建自己的个人博客,所以我们需要注册一个GitHub账号来借用(白嫖)GitHub的域名和服务器资源

注册完后点击右上角的 + -> New repository 新建仓库

pasted-2.png仓库名一定要是你的 用户名.github.io

GitHub Pages的域名就是你的用户名.github.io,与该域名同名的仓库用来存放网站的内容(GitHub Pages只显示静态内容,关于静态网页|百度百科

安装Git

现在你已经建好了你的仓库,但它空空如也,我们需要将本地编写好的网站内容同步到这个仓库(虽然现在还没有任何网站内容)。

你可以点击仓库旁的Add file按钮来完成这个工作,但这种方式对于大量且需要多次同步的文件来说显然过于憨憨,这时就需要用到全世界都在用版本控制|百度百科工具Git。

通过Git来连接你的GitHub仓库并同步本地文件,现在不会用没关系,后面我会介绍如何使用

Git安装完后,你会发现鼠标右键多了两个选项,你可以点击Git Bash here,然后在弹出的命令行里输入:

git --version

如果出现版本信息,则说明Git安装成功

安装Node.js与初始化Hexo

好了,万事俱备,现在我们就开始编写网站内容吧!什么?你不会写网站?好的你可以走了,开个玩笑,我也不会写网站,但是没关系,有现成的框架,我们只需要安装它并配置就ok了。

我使用的是Hexo,选择它的原因有两个,一是快,二是能生成静态博客界面(上面也提到了GitHub Pages只显示静态内容)。

由于Hexo是基于Node.js运行的,所以我们要先安装Node.js,这里推荐选择长期支持版,安装时无脑下一步就行。安装完后打开命令行输入:

node --version 

若正常显示Node.js版本则说明Node.js安装正常

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

npm是Node.js附带的包管理工具,我们通过它来安装各种工具,npm国内可能比较慢,这里配置成使用淘宝的镜像

npm install hexo-cli -g
#安装hexo

全局安装hexo终端

然后选择一个合适的目录新建一个文件夹

以后这个文件夹就做为你存放网站内容的地方了~

该目录下打开命令行(可以通过右键Git Bash Here)输入:

hexo init 你新建的文件夹的名称

新建的文件夹最好和你此前新建的仓库名一致,输入完这条指令后,你的新建文件夹里就有一些东西了

cd 你的名字.github.io

进入你的博客文件夹(以下简称为Blog)

npm install

安装所有 package.json 文件中提到的包

hexo server

开启hexo服务器,该指令会经常用可缩写成 hexo s

hexo s输入完后等待一会,命令会提示你可以通过localhost:4000访问本地网站了,打开浏览器,在地址栏输入localhost:4000,网站的模板就出来了。

你可以按 Ctrl + C 中断服务器的运行

至此你已经有了一个本地的网页,接下来要做的就是把本地的网页内容部署到GitHub仓库上了

购买域名与备案(可选)

在正式使用之前,我还想说说自购域名的问题,我是推荐自己去购买一个域名的。

首先有一个自己的域名可以用来装逼,也可以绑定邮箱,不过这都不是主要的,主要还是方便百度收录,因为某些问题,GitHub Pages是拒绝百度访问的,有了域名以后,你可以将来自百度的请求解析到GitHub Pages的镜像(比如通过Coding.net),这样就能通过百度搜到你的网站了,可以参考这些文章:

选择域名时最好选择.com/.cn这类顶级域名,可以在腾讯云、阿里云上挑选,普通的.com首年一般要60RMB左右,.cn会便宜一些,最好捡漏个短一点的有内涵的,说不定哪天就暴涨了(想Patch)。

当然图便宜的话,也有很多1RMB的小众域名,如:.xyz .top之类的,很多博客也都是用的这些域名。

域名购买完后,为了更好地使用服务商的CDN服务,推荐去进行ICP备案,
按照各个服务商的备案教程操作即可。

需要注意的是

  • 购买域名后要立刻进行实名认证,因为实名认证后需要等待48小时才可以开始进行备案
  • 备案时一般需要填写服务器信息,你可以在相应服务商那里买一个月,一般都会有学生优惠,价格在10RMB左右,备案成功后不续费也没问题
  • 备案成功后页脚必须展示备案号,且备案号必须指向http://www.beian.miit.gov.cn/

至于要不要长期购买服务器资源,就看个人的需求了,因为我的目的是搭建静态博客,免费的GitHub Pages就能满足我的全部需求,如果你想更加自由充分地使用网站,还是推荐去买个服务器的,由于我没有经验,就不多赘述了

博客配置与部署

主题选择与下载

打开你的本地博客,你可能觉得界面并不是很好看,但没关系,Hexo生态提供了很多Hexo主题供你选择,选择一个你喜欢的就好

顺带一提

  • Hexo最受欢迎的主题是NexT
  • 我是使用的是一款名为Yun的主题

Hexo主题中选好了之后,你可以点击主题的标题跳转到对应的GitHub界面,点击clone -> Download ZIP即可下载主题

pasted-0.png

以Yun主题为例

下载完后来到你的Blog文件夹,将下载好的主题.zip解压到Blogtheme文件夹下,即形成Blog\theme\主题\主题的文件的结构

你也可以通过一条Git指令完成下载和解压的操作

git clone https://github.com/YunYouJun/hexo-theme-yun themes/Yun

clone GitHub仓库就是git的一个功能,就是把对应的仓库的文件复制到你指定的文件夹(themes/Yun,如果不存在则自动创建)

配置hexo

好的,下载安置好主题后我们来看看如何配置hexo让它用你的主题来生成静态页面文件,首先我们看到初始化hexo后的Blog文件夹下有这样几个文件,我们主要会用到的有_config.yml,sourcethemes

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

关于_config.yml

这是博客的配置文件,博客的名称、作者、语言、博客主题、以及部署信息都通过更改这个文件来设置

关于source

source放置我们博客内容,里面初始有两个文件夹,一个是drafts(草稿),一个posts(文章),里面是.md文件

关于.md文件会在博客写作里说明

关于theme

不用我说了吧,theme里存放的就是主题文件,hexo会更据这些主题文件来生成静态界面

配置hexo实际上就是修改_config.yml文件,安置好了主题,我们还需要更改_config.yml来切换主题,在 _config.yml 中找到 theme 字段,将其后的 landscape(默认主题) 修改为 Yun

注意!我这里theme下的主题文件夹名是Yun,如果你用了其他名称,请根据你的名称修改,如:目录结构Blog\theme\A\A主题的文件,你想用A主题的话就应该修改成A

关于_config.yml的配置还有很多,可以参见Hexo配置文档

除此之外Hexo的主题也支持很多自定义项,可以参见该主题的文档,如Yun主题有对应的Yun文档
PS:主题的配置是一个漫长的过程,我推荐先把后面的流程走完再回来配置主题

博客部署

Blog文件夹下打开命令行,由于Hexo本身是有部署到GitHub Pages的插件的,我们安装这个插件即可

npm install hexo-deployer-git

在将本地博客上传至GitHub仓库之前,我们还得进行一项配置,那就是配置_config.ymldelop字段

deploy:
  type: git  
  repo:    #仓库地址
  branch: master # 默认使用 master 分支
  message: Update Hexo Static Content # 自定义此次部署更新的说明

将其下的repo字段改为你的GitHub Pages仓库,这里有两种连接方式,一种是通过Https连接,一种是通过SSH连接

通过Https连接

Https连接方式的话,repo直接填写为你的仓库的地址就好了https://github.com/用户名/用户名.github.io,
如我的仓库:https://github.com/Meow-2/Meow-2.github.io,这种方法比较简单,但缺点就是你每次输入部署指令hexo deploy时都需要验证你的GitHub用户名和密码,而且Https只能连接到公共仓库

通过SSH连接

SSH连接的话,repo需要填写为git@github.com:用户名/用户名.github.io.git,如我的仓库就是git@github.com:Meow-2/Meow-2.github.io.git ,这种方式稍复杂一点,但每次hexo deploy时不需要验证你的GitHub用户名和密码,且能连接到私有仓库。

关于如何用SSH连接到GitHub可以参考这篇文章:使用SSH方式实现Git远程连接GitHub

各种配置完成后,我们就可以把博客上传至GitHub仓库了,这里会用到三个指令:

hexo clean #清理静态页面
hexo generate #生成静态界面
hexo deploy #根据你的deploy配置部署静态界面

以后每次本地写完博客,输入这三条指令就可以将博客部署到GitHub仓库了,当然也可以简写成一行hexo cl && hexo g -d,此外在hexo deploy 之前也可以先hexo server在本地查看下效果

之后你就可以在https://你的名字.github.io看到你的线上网站了

这里建议在打开GitHub Pages的强制Https跳转

pasted-1.png打开仓库选项

1开启https跳转(似乎默认就是打开的,如果没有打开,自己打开即可)

源码保存(可选)

现在你的博客已经可以正常使用了,但是有一个问题,你只能在当前的电脑上编辑你的博客,换一台电脑就没法了。

为了解决这个问题,我们可以在GitHub上新建一个私有仓库来存放你博客的源码(GitHub被微软收购以后已经可以免费创建私有仓库了)

upload successful创建私有仓库

仓库创建完了之后,我们Blog文件夹下打开命令行,之后我们将用Git来将本地文件同步到Github新建的仓库

初始化Git

git init 

这条指令执行完后,Blog文件下就会生成一个隐藏的git文件夹,此时该文件夹就成了一个本地仓库,这条指令执行一次即可

通过Git与远程私有仓库建立连接

git remote add origin git@github.com:用户名/用户名.github.io.git

前面提到了,要与私有仓库建立连接必须使用SSH协议,你的GitHub账户一定得设置了公钥,你的本地用户目录下一定得有对应的私钥才行,这条指令也是执行一次即可

将本地仓库推送到远程仓库

git add .  
git commit -m "描述此次的更改"
git push origin master

git本地仓库存在一个缓存区,通过git add来将更改的文件放入缓存区内,后跟.则表示将文件文件夹下所有的文件加入缓存区(可通过编写.gitignore文件来将一些文件排除在外,支持正则表达式),然后git commit则是将缓存区中更改的文件同步到本地仓库,git push则是同步到远程仓库

每次编写完博客后,只要将源码上传到私有仓库,即使换了台电脑,只要登录GitHub账号,就可以将自己博客源码clone下来,继续编写发布你的博客了。

自动部署(可选)

但是这样就存在一个问题,每次编写完博客又要部署,又要保存源码,实在是有点麻烦(当然,你可以用一个.bat或一个.sh文件解决这个问题),但这里要介绍的是另一种方法,通过GitHub Actions实现:

一般情况下,我们发布博客的流程是:

upload successfu

我们的目标是变成这样:

uploadsuccessful

这样我们每次只需要向私有仓库上传代码就好了,我们可以依靠GitHub Action来实现:

uploadsuccessful进入存放代码的私有仓库新建工作流

upload successfl点击建立自己的工作流

uploadsuccessful随便取个名字,然后用以下代码替换默认代码

name: Hexo Deploy Automatically

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      
    - name: Node.js envs
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    
    - name: Hexo deploy
      env:
        HEXO_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "Your GitHub UserName"
        git config --global user.email "you@example.com"
        npm i -g hexo-cli
        npm i
        hexo clean && hexo generate && hexo deploy

这段代码来自初探无后端静态博客自动化部署方案,原作者已经说的很详细了,我这里只做下补充。
因为GitHub Actions的工作流实质上是为每个仓库提供了一个储存有该仓库文件的虚拟机,当你push到远程仓库时,可以通过该虚拟机完成一些操作。
既然想让虚拟机帮我们部署博客,而且虚拟机上已经有我们仓库的文件了,也就是说包含了配置好的_config.yml,那它只需要安装node.js
再更根据package.json安装相关包就行了(本地.gitnore文件默认不上传包,但会上传package.json文件,这个文件里记录了所需包的信息,所以我们的仓库里是没发用Hexo和相关插件的,虚拟机要自己安装才行)CheckoutNode.js envs以及Hexo deploy的倒数2、3行就在完成这个工作
又因为我们没法直接操作虚拟机,如果通过Https方式hexo deploy的话,我们是没法输入用户密码的,所以我们需要用SSH方式来hexo deploy。
这就需要本地主机的SSH密钥,Hexo deploy的1~4行就是把密匙交给虚拟机,这里用到了HEXO_DEPLOY_KEY,需要我们自己将仓库的HEXO_DEPLOY_KEY设置为本地的SSH密匙

upload successfu将仓库的HEXO_DEPLOY_KEY设置为本地的SSH密匙

然后我随便改点东西,在Blog文件夹下执行:

git add .  
git commit -m "描述此次的更改"
git push origin master

如果你的两个GitHub仓库都更新了,那么就说明你的自动部署配置完成了,同时也意味着关于博客的搭建基本上也完成了!可以开始写作了!

博客写作

Hexo的写作方式是在source下的_posts中新建.md文件(_drafts是草稿箱,放在这里的.md文件不会被展示),.md文件即Markdown语法的文件。

Markdown语法

Markdown是一种文本标记语言,以纯文本的形式存储。 Hexo的功能就是将.md文件转化为静态的Html文件。

你可能从未使用过Markdown编写文本,不过不用担心,Markdown语法并不复杂,只需要记住两三个常用的语法就可以开始使用了,我也是第一次使用Markdown来写文章,没错,本文就是Markdown编写。

一下是一些常用的Markdown语法:

# 一级标题
## 二级标题
# 又是一级标题
**加粗**
*斜体*
~~划掉~~
`块`
>注释

更多Markdown语法

Ps:为了方便编写你可以选择一款带Markdown预览功能的编辑器,例如VS Code、Atom、Tpyora等

博客编辑管理工具

你可能觉得一篇篇新建博客,文章从草稿箱移动到_posts很麻烦,有没有什么博客编辑管理工具呢,很遗憾,是有的,比如Hexo-admin不过它已经很久没有更新过了,同样使用npm安装

npm install --save hexo-admin

安装完后hexo s,进入http://localhost:4000/admin/# 就可以看到管理页面

pload successful

通过管理界面,可以进行本章和界面的增删编辑等,同时也提供.md预览功能,图片粘贴功能(在文章编辑界面粘贴图片,自动生成链接,同时保存到本地预设文件夹)以及一键部署功能。

说是一键部署实际上是运行用户自定义的脚本,所以我们也可以用它来同步我们的源码到私人仓库,搭配自动部署使用简直是懒人福音。
当然了要使用一键部署的功能还需要,在_config.yml配置:

admin:
  deployCommand: '你编写的脚本' 
  #win下使用.bat,linux下使用.sh 

由于Hexo-Admin很久都没有维护了,本身有许多bug,比如粘贴图片时的路径bug,可以参考这篇文章修改

(如果你不是追求GUI+一键部署完全脱离命令行的话,我不太推荐Hexo-Admin,毕竟小bug多,也几年没有人维护了)

以上就是全部的搭建了,要是你成功走完,恭喜你!但是可别忘了坚持下去啊!

uploadsuccessful

尾声

博客嘛,无论怎么搭,贵在坚持,我搭博客的这段日子,对我个人来说也算是破釜沉舟的一段日子,这句贵在坚持既是对各位小伙伴说的也是对我自己说的,未来不可知,但总有许多前人的经验告诉我们什么时候该干什么事,我希望我做的每一件事都以自己为准,不被这些所谓的“应该”左右,这样做固然会面临各种各样的风险坏处,甚至以后一定会后悔,但我依然觉得人生就这么一遭,我应该尽自己而为。

最后,交个朋友吧,我是可爱的女孩纸!