建立自己的独立博客,也可以很好的将自己的推广经验和技巧用在上面,可以检查自己的能力,也比较容易查漏补缺,是对经验的一个很好的积累过程。

搭建博客之前我们需要一个可以托管静态网站的空间,如Github Pages,云服务器等。

Q&A

为什么是静态网站?现在不都是动态网站吗?

首先静态网站相对于动态网站来说搭建相对简单,而且我个人来看,博客更重要的是内容的输出而不是网站有多花哨,所以才选择静态博客。

为什么选择Hexo

引用官网的一句话

A fast, simple & powerful blog framework

快速、简洁且高效的博客框架,使用博客框架能够帮我们省去很多造轮子的过程,专注于内容,达到效率最大化。

搭建过程

申请云空间

  1. 首先,需要一个存储空间

    之前我用的是云服务器,好处是自己可以看见全部过程,你能够完全“掌握”所有资源,但是配置过程繁杂,上传博客每次需要输入密码,无法专注于内容。前面发现COS也可以托管静态网站,所以选择了COS

    阿里云也有类似服务,叫做OSS

就是这个,每个月会送给你一定量的流量包,访问不大的情况下完全够用了。

  1. 腾讯云登录好之后打开COS控制台,创建一个存储桶,名称比如blog,随意,地域为了访问更快点选一个离自己近的区域即可,访问权限一定要选择公有读私有写否则外部无法访问。
  2. 开启静态网站功能

  1. 在右上角选择访问管理,创建一个密钥方便外部访问,并记录好SecretIdSecretKey备用。

安装本地环境

  1. 在本机随意一个地方新建一个文件夹用来存储博客原始文件
1
mkdir blog
  1. 通过npm安装Hexo
1
npm install hexo-cli -g

国内网络环境不好也可使用淘宝镜像cnpm install hexo-cli -g

  1. 安装好之后把工作目录切换到刚刚创建的文件夹,然后使用
1
hexo init

初始化一个博客框架。

  1. 现在已经可以基本使用了,可以通过hexo命令
1
2
hexo g #生成静态文件
hexo s #启动本地服务器

启动本地服务器来预览,输入命令后浏览器访问localhost:4000即可看到默认的博客效果,然后再博客目录下./source/_posts文件夹下看见自动生成的HelloWorld.md

是的,Hexo所有内容都是基于Markdown来生成的,所以需要你有基本是Markdown基础,不会的可以通过菜鸟教程来学习。

如果觉得默认皮肤比较丑可以在官方主题站选择自己喜欢的安装使用,具体里面都有使用说明。

部署

Hexo使用

1
hexo g

命令后会在博客根目录生成一个public文件夹,所有静态内容都在这个文件夹里面,所谓的部署其实就是把这个文件夹的内容上传到服务器上而已,所以能力强的同学也可以手动部署

  1. 安装部署插件

我们需要安装hexo-deployer-cos插件,如果你已经在准备中安装了,那么就不用安装了。否则按照下面的命令安装。

1
npm install hexo-deployer-cos --save

接下面我们配置hexo的配置文件,首先打开根目录的_config.yml配置文件,将原来的deploy替换为下面的内容:

1
2
3
4
5
6
7
deploy: 
type: cos
appId: yourAPPID
secretId: yourSecretId
secretKey: yourSecretKey
bucket: yourBucketName-yourAPPID
region: yourRegion

假如说我的APPID1251234567secretIdABCDEFGHIGKLMNOPQRSTUVWXYZsecretKeyabcdefghijklmnopqrstuvwxyz,创建的bucketwwwregion可用地区是成都,也就是ap-chengdu

那么我的_config.ymldeploy配置为:

1
2
3
4
5
6
7
8
9
......
deploy:
type: cos
appId: 1251234567
secretId: ABCDEFGHIGKLMNOPQRSTUVWXYZ
secretKey: abcdefghijklmnopqrstuvwxyz
bucket: www-1251234567
region: ap-chengdu
......

部署Hexo到COS

现在你已经完成了最后的设置,最后一步就是需要部署项目到COS了,输入部署命令:

1
hexo d

你会看到如下输出:

1
2
3
4
5
6
7
8
9
INFO  Start processing
INFO Generating Baidu urls for last 1 posts
INFO Posts urls generated in baidu_urls.txt
https://www.techeek.cn/2018/08/14/Ubuntu-DTS-translation/
INFO Files loaded in 1.24 s
INFO Generated: sitemap.xml
......
INFO 成功上传:...
......

好了,现在我们访问你的域名看看是否上传成功了?在浏览器打开刚刚在COS概览界面的地址,即可看到效果。

我们看到项目已经上传,我们在打开COS的Bucket,看看是不是网站真的在Bucket上。

使用自定义域名

我们发现腾讯云提供的访问域名非常长而且不好记,所以可以通过绑定自定义域名来修改,在域名与传输管理可以绑定

这两个都可以绑定自定义域名,上面的可以提供一个CDN功能,访问比较大的时候可以选择开启,使用CDN有可能产生额外的费用。

绑定之后在DNS控制台按照提供的CNAME地址设置解析,等待生效后即可通过自定义域名访问。

好了,搭建过程就结束了,具体的美化过程等可以通过搜索Hexo美化来获取,或者后续如果有空的话也会在本站更新,敬请期待!