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

建站,重在折腾:

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

站点准备

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

hexo-theme

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

在托管平台上不一定要和我选的一模一样(十级自恋),根据自己的需求,选择适合自己的就是最好的。

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

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/,是不是发现博客主题已经改变了~~~

发布站点

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

客官,别急,这就来!

  • (假设你的用户名是demo)先到GitHub上新建一个demo.github.io的项目,打开https://github.com/demo/demo.github.io/settings,开启GitHub Pages,待用…
  • 打开blog/_config.yml文件
  • 修改deploy参数,格式要严格遵守deploy参数(不知道的,可以Hexo部署获取帮助)

    1
    2
    3
    4
    5
    deploy: 
    type: git
    repo: git@github.com:demo/demo.github.io.git
    branch: master
    message: commit message
  • 然后,打开Git Bash,cd到blog目录,执行:
    hexo clean & hexo g & hexo d
    注意:这个过程可能需要你输入账号密码,也可能没有-.-

  • 打开网页中的demo.github.io工程,刷新网页检查代码是否已经部署了;
  • 成功后,打开https://demo.github.io,如果未能打开,需等待几分钟等待GitHub解析刚部署的网页。

新增博文

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

  • 首先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://brucecastle.cf/favicon.png)

    [我是链接](https://brucecastle.cf)

    <div style="text-align: center;">我是居中内容</div>
  • 保存文档,本地查看博文

    1
    hexo clean & hexo g & hexo s

打开服务连接http://localhost:4000/,检查博文板式是否符合你的预期

  • 部署本篇博客到GitHub服务器
    blog/_config.yml的deploy选项的message中填入本次提交的log文,一遍以后查找
    1
    2
    3
    4
    5
    deploy: 
    type: git
    repo: git@github.com:demo/demo.github.io.git
    branch: master
    message: add a new articles

执行部署命令:

1
hexo d

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

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

本次主要完成了基于Hexo技术搭建的GitHub Pages个人博客,实现了环境搭建、初始化博客项目、新增博文、部署博文,并是使用HTTPS进行访问;有待增加的:解析_config.yml参数、使用图床管理博文图片、绑定域名

文章目录
  1. 1. 站点准备
  2. 2. 必备技能
    1. 2.1. Git安装与配置
    2. 2.2. Node安装
    3. 2.3. Hexo安装
    4. 2.4. Markdown
  3. 3. 站点配置
  4. 4. 发布站点
  5. 5. 新增博文