如何搭建自己的个人博客?

前言

什么是博客?

首先,大部分人好像都不知道博客是什么。。。

博客,仅音译,英文名为Blogger,为Web Log的混成词。它的正式名称为网络日记;又音译为部落格或部落阁等,是使用特定的软件,在网络上出版、发表和张贴个人文章的人,或者是一种通常由个人管理、不定期张贴新的文章的网站。
—–来自百度百科

博客可以用来写日记,写教程,个人经历….只要不违法,什么都可以写,类似于微信公众号,但是搭建博客稍微麻烦一些,不过自由度也更高。

什么是Hexo?

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
—–官网介绍

hexo是一个博客工具,尽可能简化了搭建博客,写文章的过程。由于Hexo生成的是静态网页,并没有后台,所以我们并不需要服务器,使零成本成为可能

如何实现几乎零成本搭建?

首先先来介绍几个东西:
GitHub pages:GitHub Page,一般多用于托管个人的静态网站,注册账号即可免费使用,使用自己的域名不需要备案,因为GitHub不在国内;

Gitee pages:和GitHub pages类似,只不过gitee是国内的平台,访问速度会比GitHub pages快很多(倍);注册账号即可免费使用,缺点是无法更换自己的域名(需要付费);

对象存储Oss:对象存储类似一个网盘,不过也提供静态网站托管服务。

相比较前两个,Oss是收费的,不过价格极其低廉;价格为0.12/G/月,下行流量费用为0.5/G/月。上传免费,请求次数按千计费,0.01元/1000.
如果把他当成一个普通的网盘,价格比市面上的网盘贵很多,不过我们又不用来存东西,只需要上传hexo渲染好的静态文件就行,基本上一块钱能用一年(如果你的博客没多少人看),而且访问速度很快
唯一的缺点就是:如果需要网页托管服务,需要一个域名,而且是已经备案的域名,一个域名也不贵,备案需要一两周的时间。如果不想备案,可以找一个已经备案的域名,找他要一个二级域名也可以正常使用。

如果资金充足可以购买服务器:
阿里云学生机,9元/月,24岁以前可一直续费;
不想备案也可以购买不在国内的服务器

搭建博客首先要懂得一点点知识:

  • 简单了解GitHub(建议先去GitHub网站看一看)
  • 了解git(不用完全理解,只需要懂得原理就行了,我也没有彻底搞懂,这里放出一篇文章了解一下即可:什么是git?
  • 了解一点点ssh的公钥密钥机制(建议百度,贼容易理解,只要搞懂什么是公钥密钥即可)
  • 了解一点MarkDown,html格式(也不用完全理解,md为markdown缩写,写文章的时候使用;html只是为了让你的博客更完美,不懂也没关系,效果依然不差)
  • 稍微懂一点点Linux指令(不懂也没关系,我尽量在文章中注明每个指令什么意思)
    上边不懂也没关系,按照文章一步步来就问题不大

    搭建博客

    首先看一下基本流程:我们需要在自己电脑上安装hexo,配置文件,选主题,写文章,然后将hexo渲染好的静态网页上传到服务器。

    准备工具

  1. 一台电脑(Windows需要一个shell软件,本文使用macOS,window也差不多)
  2. 上面所说的任何一个东西

    在本地搭建hexo

    由于hexo是基于NodeJs,所以我们首先要安装NodeJs,去官网下载适合自己的版本即可,官网

打开终端,切换至root用户

1
2
sudo su
输入你的电脑开机密码

我们需要使用npm包管理器安装hexo,但是npm在国内的访问速度和下载速度极其极其慢,所以我们要安装国内的淘宝镜像

1
2
3
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后使用cnpm安装hexo博客
cnpm install -g hexo-cli

这一切都安装完成后,我们要在访达,文稿路径下创建一个空文件夹,名称随意,我这里文件夹名称为 “blog”
之后切回终端,输入cd,空格,把blog文件夹拖进终端回车
之后输入pwb查看路径,确认是不是blog结尾
我们需要在blog文件夹内搭建hexo,所以要确保终端运行在blog文件夹内,在终端输入

1
hexo init

等待安装完成,查看访达-文稿-blog文件夹下会出现hexo的基础文件
到此为止,hexo博客在本地搭建完成,是不是灰常的简单

启动博客

切换回终端,输入

1
hexo s

然后他会在本地启动博客,此时在浏览器输入127.0.0.1:4000,即可启动成功。

在你输入其他指令时要关闭本地博客,快捷键ctrl+c即可关闭
hexo s可以用于在本地调试博客,查看文章格式是否正确,此网址只能在你的电脑上打开,
hexo默认为你创建一片文章:“hello world”,提供了一些简单的指令教程

创建新文章

1
hexo n(new) “文章名字”

hexo会在blog/source/_post路径下创建一篇文章,你的所有文章都将储存在这里
格式为markdown,后缀为md,可以使用vscode或文本编辑器编辑文章
此时回到终端,输入

1
2
3
4
5
6
hexo clean
此命令用于清除hexo生成的静态网页文件,如果不清除,会出现你所做的更改没有在网站上实现
hexo g
此命令用于生成渲染静态网站文件
hexo s
启动博客即可看到你创建的新文章

在本地使用hexo s启动博客不需要每次都clean ,g重新生成文件,输入保存后直接在网站刷新就可以看到更改

切换主题

你可以看到,hexo默认主题灰常的丑(不是),所以我们要更改为我们喜欢的主题,hexo有大量的主题,可以在这里找到自己喜欢的主题:https://hexo.io/themes/
hexo主题文件储存在blog文件夹的themes路径,打开可以看到hexo的默认主题landscape
现在流行的hexo主题有next,我使用的是fluid主题,我将以fluid主题作为例子,下载链接:

gitee,国内下载速度快】 【GitHub】 【官方搭建指南
下载后解压放进themes主题文件夹,
在hexo配置文件_config.yml里编辑,将主题改为fluid,即可
_config.yml为hexo配置文件,可以在里面修改一些基础信息,每一个主题都会自带一个配置文件,不要弄混了

部署博客

配置完成后,就迎来了 对新手超级超级超级不友好 的部署环节,我尽可能把每一个坑都写上去,如果没有提到,百度是个好东西,hexo是一个很出名的博客系统,问题几乎都能在百度找到
部署博客意思就是将hexo渲染好的文件发送到服务器/GitHub/Oss,但是手动上传非常的麻烦,所以我们要用到git工具;
git工具是一个对新手不怎么友好的工具,但是熟悉了却非常方便。hexo就是利用git将文件部署到服务器/GitHub上;

首先安装部署插件,在终端输入:

1
npm install hexo-deployer-git --save

部署到GitHub

GitHub非常的方便,因为GitHub就是利用git打造的代码托管平台

添加公钥到GitHub

为什么要添加本机公钥到GitHub?因为当你部署到GitHub的时候,每一次都要输入ssh密码,但是如果你的GitHub账号有你电脑的公钥,就可以直接上传,不需要每次都输入密码

首先我们要注册账号~
注册完毕后打开设置

在左边找到SSH and GPG keys

点击 new ssh key

这里需要填写你的电脑的ssh公钥,没有怎么办呢!来看生成教程:

生成ssh公钥

打开终端,新建一个窗口(避免混淆,其实一个也行),切换至root

1
2
3
4
5
6
7
8
sudo su
切换至root

输入电脑密码

生成公钥私钥
ssh-keygen
如果不想麻烦,请一路回车


直到提示成功,然后查看公钥:

1
cat ~/.ssh/id_rsa.pub


看到一串由ssh-rsa开头的,这就是你的电脑的公钥,然后复制填写到GitHub里面

创建仓库

我们需要一个仓库来存储上传的渲染好的静态网页文件
GitHub右上角加号,选择第一个创建新仓库

仓库名称随便填
其他全部默认,然后会进入你的新仓库

在第一行有一个链接,选择ssh,然后复制下来,下一步填写配置文件时需要用

填写hexo配置文件

打开blog文件夹中的_config.yml,在结尾添上一串

1
2
3
4
deploy:
type: git //记得冒号后有空格
repo: git@github.com:blahblah/blah.git //填写你从GitHub复制的ssh链接
branch: master //记得冒号后有空格

完成✅,保存后在hexo终端输入hexo d来测试是否成功(记得先hexo clean ,hexo g)
一串代码过后,查看你的GitHub仓库,刷新一下时不时出现了很多文件,这里的文件就是blog路径下的public文件夹

GitHub pages

文件上传好了,如何开启GitHub pages呢!打开设置(是这个仓库的设置)
向下滑~找到GitHub pages选项

source选择第一个 master branch

稍作等待,会刷新一下,然后再滑下去就会出现一个链接
此时,GitHub部署已经完成,可能前几分钟打不开此链接,会出现404,稍等一会即可

部署到GitHub完成✅,把这个链接分享给你的朋友吧

部署到oss

这里以阿里云oss为例,首先下载阿里云oss的hexo插件:

1
npm install hexo-deployer-ali-oss --save

然后要在阿里云创建oss

配置oss

打开阿里云对象存储控制台,直达
在最右边选择创建Bucket

名称随便填,名称全网唯一不重复

区域选择距离最近的即可
然后读写权限选择公共读写
然后其他全部默认即可
然后回到oss主界面,右边常用入口里面选择Access Key,创建Access Key

部署

然后在配置文件中添加:

1
2
3
4
5
6
deploy:
type: ali-oss
region: oss-cn-hangzhou
accessKeyId: <您的oss accessKeyId>
accessKeySecret: <您的oss accessKeySecret>
bucket: <您的bucket name>

填写刚才的accessKeyId和accessKeySecret,保存即可,之后测试:

1
2
hexo clean
hexo d -g 相当于把渲染和部署指令放在一起

部署完成

开启oss静态页面

在左边一栏找到你刚创建的oss储存桶,基础设置–》静态页面,简单配置即可开启

开启静态页面需要绑定域名,而且必须是已备案的,备案后解析到oss的公网地址即可

部署到服务器

部署到服务器是最麻烦的,坑也是最多到

在服务器搭建git仓库

部署到服务器也是利用git来进行的,我们要在服务器搭建一个git服务器仓库

配置服务器

首先要买服务器嘛,然后安装宝塔面板
宝塔面板是服务器管理工具,有图形化界面,可以更加简单的管理服务器,直达官方
购买服务器建议使用centos7系统,然后这里以阿里云的轻量级应用服务器为例
进入管理界面,选择远程连接,切换至root用户,直接复制宝塔安装指令即可

1
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

centos安装命令,几分钟即可安装完成,安装完成会提供初始账号密码,以及登录地址,在浏览器登录即可,我找不到截图,自己摸索
安装完成之后会让你选择环境,选择左边的LNMP,linux+Nginx+Mysql+Php
完成

创建git服务器仓库

使用远程链接连接到服务器
首先检查服务器是否安装git工具,没有则安装:

1
2
3
git --version //如果没有出现版本号说明没有安装git
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel //安装git依赖
yum install -y git //安装git

创建git用户

1
2
3
4
5
6
7
8
useradd git //创建名为git的用户
passwd git //设置git用户的密码
su git //切换到git用户
cd /www/wwwroot/ //网站目录都会存储在这里
mkdir blog //创建博客路径,上传的静态文件会在这里
mkdir repo //创建git服务器仓库路径
cd repo //进入repo路径下
git init --bare blog.git //初始化git仓库

创建git仓库完成,我们需要添加一个钩子,让上传到blog.git的文件移动到blog文件夹里

1
2
3
4
cd blog.git/hooks   //进入钩子路径
vi post-receive // 创建 hook 钩子函数
添加下面
git --work-tree=/www/wwwroot/blog --git-dir=/www/wwwroot/repo/blog.git checkout -f

第一个路径是你的网站目录blog文件夹,第二个路径是仓库地址,编辑完成后,按一下esc,英文输入法输入:(冒号),然后输入wq回车即可退出编辑
修改钩子权限:

1
2
3
chmod -X post-receive    //添加执行权限
exit //退出git用户,回到root用户
chown -R git:git /home/git/repos/blog.git //把仓库的拥有者给git用户

中间如果怀疑自己路径不对可以使用 pwd 指令验证是否在正确的路径
验证是否创建成功:
回到本地终端,新建一个窗口,
git clone git@你的服务器公网ip:/www/wwwroot/repo/blog.git
看看能不能拉取成功,这个文件会在“你的用户名”路径下,会出现一个空文件夹,成功即表示git服务器端搭建成功

添加自己电脑的公钥到服务器

本地终端:

1
2
ssh-copy-id -i ~/.ssh/id_rsa.pub git@你的服务器公网ip
ssh git@你的服务器

如果不需要密码连接成功,即表示添加公钥成功
在服务器端所有操作已经完成

本地hexo配置文件
1
2
3
4
deploy:
type: git //记得冒号后有空格
repo: git@服务器公网ip:/www/wwwroot/repo/blog.git //填写服务器git仓库路径
branch: master //记得冒号后有空格

之后,回到你hexo的终端界面

1
2
hexo clean
hexo d -g

测试,查看服务器blog文件夹是否已经上传
然后在宝塔面板—》网站–》新建站点,在网站根目录填上blog的路径即可


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!