从零开始搭建自己的博客天地(上)

1,541 6分钟

建站,重在折腾:

之前提及过公网建站的文章(站内搜索[Ctrl+F]:Say you again),但是没有讲具体的流程,在踩过N个坑之后,在这里讲一下自己建站的经验,让更多的爱好者轻松完成建(折)站(腾)工作。下面开始唐僧念经时间~

站点准备

要搭建个人博客,需要一些条件的支持,一般包括如下内容:

hexo-theme

首先在第一个选项中选择一个适合自己的托管平台,我是从GitHub到Gitee,再到Coding。当时刚接触Hexo时,只想着能在公网访问自己的博客就算成功了,然后就在GitHub上部署了自己的第一个站点(无奈太烂,只好解散);后来,想着博客搞那么烂,有的还是搬砖搬过来的,还是体力活,站点源码就不开源了,中间用了一段时间Gitee;再后来,全世界都在HTTPS,都在使用自己的域名,那我也得跟得上潮流不是,所以综合考虑后就选择了Coding。为了少踩坑,本文就直接使用Coding作为平台进行说明。

托管平台大家可以自行选择,根据自己的需求,选择适合自己的就是最好的

然后去主题网站,下载自己喜欢的主题样式,天生审美残缺,这里就不给推荐了,大家自行选择。

hexo-theme

如果不是Git、Node.js小白,请跳过必备技能,直接进入站点配置

必备技能

Git安装与配置

参见Git安装与配置

Node安装

参见Node安装与配置

Hexo安装

当Git和Node.js安装配置好后,还要安装hexo组件,用来创建博客项目。

  • 使用cnpm安装Hexo

    1
    cnpm i hexo-cli -g
  • 使用hexo创建第一个博客:

    1
    hexo init blog
  • 进入blog,安装模块

    1
    2
    cd blog
    cnpm i
  • 生成静态网页,启动服务

    1
    2
    hexo g
    hexo s

打开服务连接http://localhost:4000/,最基本的博客项目就运行起来了,下一步就要对博客进行美化加工。

Markdown

参见Markdown学习入门

站点配置

找到好Hexo主题后,找到主题托管的工程,一般都会有一定的说明,以next主题为例:

  • 首先cd进入到blog根目录;
    git clone https://github.com/hexojs/hexo-theme-next themes/next
    next主题就已经放入到blog/themes文件夹下了,如果不对next工程进行PR操作,或者为了减小blog的体积,可以把next文件夹下的.git文件夹删除。
  • 打开blog/_config.yml文件
    修改theme

    1
    theme: next
  • 先清理已有的工程,重新生成静态网页,并启动服务

    1
    2
    3
    4
    5
    hexo clean
    hexo g
    hexo s
    或者
    hexo clean & hexo g & hexo s

为确保没有浏览器缓存,我一般会加上hexo clean,其实只要页面不报错一般也是不需要的,打开服务连接http://localhost:4000/,是不是发现博客主题已经改变了~~~

发布站点

到这个时候,肯定有人说:“你讲了这么多,博客不还只是在本地用,哪里到公网访问了,哪里用到Coding了…”

客官,别急,这就来!

(假设你的用户名是demo)先到coding上新建一个demo.coding.me的项目,打开https://coding.net/u/demo/p/demo.coding.me/git/pages/static,开启Pages服务,Coding会自动帮你申请HTTPS,自此留着待用… 打开blog/_config.yml文件
修改deploy参数,格式要严格遵守deploy参数(不知道的,可以Hexo部署获取帮助)
1
2
3
4
5
deploy: 
type: git
repo: git@git.coding.net:demo/demo.coding.me.git
branch: master
message: commit message
然后,打开Git Bash,cd到blog目录,执行:
hexo clean & hexo g & hexo d
注意:这个过程可能需要你输入账号密码,也可能没有-.-
打开网页中的demo.coding.me仓库工程,刷新网页检查代码是否已经部署了; 成功后,打开https://demo.coding.me,如果未能打开,需等待几分钟等待Coding解析刚部署的网页。

## 新增博文

站点部署好后,要做到博客由访问量和活跃度需要及时更新博文,下面演示一下怎么新增一篇博文:

首先cd到blog根目录 新增博文
1
2
hexo n "newpage"     这是简写
hexo new "newpage" 这是全拼


然后在blog/source/_posts文件夹中,出现一个newpage.md文档,并附带默认文章头
1
2
3
4
5
---
title: newpage
date: 2017-12-06 12:06:22
tags:
---
尝试修改博文内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: newpage
date: 2017-12-06 12:06:22
tags: tips
---
# 我是一级标题
## 我是二级标题

* 我是列表1
* 我是列表2

![我是图片](https://blog.brucekong.com/favicon.png)

[我是链接](https://blog.brucekong.com)

<div style="text-align: center;">我是居中内容</div>


保存文档,本地查看博文
1
hexo clean & hexo g & hexo s


打开服务连接http://localhost:4000/,检查博文板式是否符合你的预期效果
部署本篇博客到Coding服务器
blog/_config.yml的deploy选项的message中填入本次提交的log文,一遍以后查找
1
2
3
4
5
deploy: 
type: git
repo: git@git.coding.net:demo/demo.coding.me.git
branch: master
message: add a new article


执行部署命令:
1
hexo d


打开网页中的demo.coding.me工程,刷新网页检查代码是否已经部署了; 成功后,打开https://demo.coding.me,已经可以看到新增的博文了。

通过以上唠唠叨叨后,能实现最基本的Coding建站,新增博文,希望能对大家有所帮助!

本次主要完成了基于Hexo技术搭建的Coding Pages个人博客,实现了环境搭建、初始化博客项目、新增博文、部署博文,并是使用HTTPS进行访问。

TODO:有待增加的包括(1)解析_config.yml参数,(2)使用图床管理博文图片,(3)绑定域名
如果有不明白的,欢迎留言或者给我 发邮件[Send Email]

关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器