×

基于hexo+GitHub Pages|Coding Pages搭建个人博客

96
Yggdrasilqh
2017.01.19 19:22* 字数 3037

摘要

本文主要介绍怎样通过hexo博客框架搭建一个个人博客,并部署在GitHub或是Coding.net。


知识清单

在开始之前,你可能需要大概了解以下技术:

  • GitHub (面向开源及私有软件项目的托管平台)
  • Node.js (JavaScript Runtime)

主要步骤


  1. 安装Node.js
  2. 安装Hexo
  3. 开始使用
  4. 更换主题
  5. 网站部署
  6. 购买域名

很简单,那么我们开始

开始


1.安装Node.js

因为Hexo是基于Node.js环境运行的,所以我们需要先装上它。

  • Mac:Node.js下载 或:

    如果你安装了HomeBrew

    $brew install node
    
  • Windows: Node.js下载

  • Linux: Node.js下载 或:

    $sudo apt-get install nodejs
    $sudo apt-get install npm
    

    (听说这种方法装的版本较老,慎用。)

    1.下载好了之后就安心的戳下一步,妥妥的,毕竟这不是Oracle。

    2.在终端输入以下命令验证

    $node -v
    v6.9.4
    $npm -v
    4.1.1
    

    如果出现了版本号的话那就证明安装成功。如果没有,可能需要手动添加环境变量到~/.bash_profile中。具体方法以后会写。

2.安装Hexo

可能很多人没有听说过Hexo是什么东西

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可生成漂亮的静态网页。

因为我们已经装了Node.js,所以随同也安装了npm (包管理工具) ,如此安装hexo就非常简单了。

  1. 打开终端输入以下命令

    $sudo npm install hexo-cli -g
    

    输入密码,等待完成。

    在安装中你可能会遇到各种问题,比如我遇到的:

    { [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
    { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
    { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
    

    一言不合就重装

    $npm uninstall hexo-cli -g
    $npm install hexo -cli -g
    
  2. 然后我们创建一个文件夹,在那里初始化hexo

    $mkdir your-blog-name
    $cd your-blog-name
    
  3. 初始化hexo

    $hexo init
    

    如果你看到以下信息,那么恭喜你,成功了

    hexo-site@0.0.0 /Users/UserName/Documents/your-blog-name
    ├─┬ hexo@3.2.2 
    ..............
    INFO  Start blogging with Hexo!
    

    这时你会在刚才创建的文件夹下看到如下的目录结构

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

    网站的 配置 信息,您可以在此配置大部分的参数。

  • package.json

    应用程序的信息。EJS, StylusMarkdown renderer 已默认安装,您可以自由移除。

   package.json
   {
     "name": "hexo-site",
     "version": "0.0.0",
     "private": true,
     "hexo": {
       "version": ""
     },
     "dependencies": {
       "hexo": "^3.0.0",
       "hexo-generator-archive": "^0.1.0",
       "hexo-generator-category": "^0.1.0",
       "hexo-generator-index": "^0.1.0",
       "hexo-generator-tag": "^0.1.0",
       "hexo-renderer-ejs": "^0.1.0",
       "hexo-renderer-stylus": "^0.2.0",
       "hexo-renderer-marked": "^0.2.4",
       "hexo-server": "^0.1.2"
     }
   }
  • scaffolds

    模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

  • source

    资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

  • themes

    主题 文件夹。Hexo 会根据主题来生成静态页面。

这些结构在待会儿我们再详细讲有什么用,现在我们看看我的博客现在成什么样了,在terminal输入

$hexo g         //g即generate缩写(生成静态文件)
$hexo s         //s即server(启动服务器)

这时你会看到

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

告诉你hexo已经启动在了localhost的4000端口上,于是在浏览器的地址栏输入localhost:4000

{%asset_img initBlog.png FirstBlog%}

这就是你的博客啦。

你可以发现它已经默认生成了第一篇Hello,World文章。那么我们该怎么开始写东西呢。

3. 开始使用

新建文章

$hexo new [layout] <title>

这个命令是新建一篇文章,layout是版面,title是你要创建的文章名。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

然后用markdown编辑器打开_posts目录下自动生成的title.md,这时你就可以愉快的写文章了。

编辑文章

这里推荐一款mac版的md编辑器:Typora

{%asset_img typora.jpeg Typora %}

至于它有多好用?用了你就知道。

{%asset_img typora2.png Typora2 %}

界面也是我很喜欢的,比Atom好看启动速度也非常快(虽然不该拿它们两比)。

{%asset_img typora3.png Typora3 %}

嗯,用它来写文章一定会让你舒畅无比。

写完之后我们保存,然后刷新刚才的localhost:4000。

{%asset_img post.png post%}

就可以看到我们刚才写的东西。

文章属性

细心的同学可能已经发现我们在打开新建的文章时,头上已经有一些东西。

title: My-Test-Post
date: 2017-01-18 17:03:40
tags:

这里是Front-matter,即文件上方以---分割的区域,它使用的似乎是yaml语言,我觉得有点类似于json和xml之类,键值对类型的数据。总之,无论他是什么,你可以方便的在这里设置一些东西,比如我们看到的文章标题,发布时间,标签,以及类别(categories)。如果要设置多个标签的话,要这样写[tag1,tag2]

还有如果你使用的主题带了评论功能的话,使用comments: false可以在特定的页面,如(关于我)关闭它。

具体参见Hexo官方文档Front-matter

当然,博客的一些固定内容我们也可以通过修改_config.yml文件来做出相应改变。

您可以在该文件中修改大部份的配置。

具体配置

网站
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC
网址
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_default 永久链接中各部分的默认值

网站存放在子目录如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

目录
参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
文章
参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置
分类 & 标签
参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名
日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 H:mm:ss
分页
参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page
扩展
参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

你可能觉得自带的主题太丑,我也觉得。所以下一步我们来更换主题。

4.更换主题

在之前我们init的博客目录下,有一个名为theme的文件夹,在这里就存放的是主题文件。

  • 你可以在这里找到你喜欢的主题,并把它git clone下来,放在theme文件夹里。
  • 修改_config.yml文件,把原来的
theme: landscape        //修改为
theme: new_theme_name   //新的主题名
  • 然后刷新页面就能看到效果啦。如果没有生效的话
$hexo clean
$hexo g
$hexo s
  • Done!

你可能想让你的主题和其他人不一样,这样就需要修改一些主题中文件来达到你喜爱的效果。在这里我就不过多赘述,有需要的同学可以通过文章末尾的联系方式联系我。

这时我们的本地博客基本就搭建好了,不如让它上波线吧~

5.网站部署

可以选择通过Github Pages或是Coding Pages来部署我们的网站,如果您想要让不会翻墙的小伙伴们更快的浏览你的网站的话,可以部署到Coding Pages里。当然GitHub Pages更好啦,毕竟是全球最大的开源项目托管平台(同性交友网站)😳。

这里我就拿Github来做示范。

{%asset_img github1.png GitHub.Register%}

  • 根据提示操作,注册成功并验证邮箱后
  • 进入自己的profile

{%asset_img github2.png GitHub.Profile1%}

  • 点击新建Repository

{%asset_img github3.png GitHub.Register%}

  • 创建一个新的Repository
    • 注意:Repository Name必须是{你的名字}.github.io,这样GitHub就会自动把他当作我们的PersonalPages,且每个人只能创建一个这样的Repository

{%asset_img github4.png New.Repository%}

  • 创建成功后我们这时候就需要上传博客文件,在上传之前,我们需要先添加SSH-KEY
  • 如果以前没有创建过SSH-KEY那么我们需要生成一个新的:
$ ssh-keygen -t rsa -C "youremail@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):

记得把邮箱地址换成自己的,然后狂敲回车。

  • 这时我们就已经有ssh-key了,它放在~/.ssh/id_rsa.pub

  • 把该文件的内容复制下来,登录到Github上,点击右上角的 Account Settings--->SSH Public keys ---> add another public keys,粘贴进你的ssh-key

  • OK!

  • GitHub现在就已经认识我们的电脑了,然后还需要设置一下用户信息

      $ git config --global user.name "cnfeat"//用户名
      $ git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱
    
  • 然后我们在博客文件夹里的_config.yml中,填入github地址

      deploy:
        type: git
        repo: https://github.com/your-name/your-name.github.io.git
    
    • 如果你不仅需要部署在github上还要放在coding上的话
      deploy:
        type: git
        repo:
              -github: github地址
              -coding: coding地址
    
  • 最后只需要

      $hexo clean
      $hexo g
      $hexo d
    

它就会自动帮我们部署到对应的GitHub和Coding的仓库里去。

打开你的网址yourname.github.io看看吧~

6.购买域名

我们在之前的部署完成后网址可能不是很美观,中间总是带有GitHub或是coding。为了逼格更高一点,看起来就像是跑在自己服务器上的网站,我们就需要花一点代价来绑定一个自己的域名。

  • 许多人推荐GoDaddy,我看了看后发现成本太高。回头投进了阿里爸爸的怀抱,好像是阿里和万网的合作,网页居然还不支持Retina屏,引用的万网那一块搜索框不忍直视。

那么这里就说说万网的域名怎么注册

  • 登陆账号(支付宝的就行),百度搜索阿里域名,在搜索框搜索到自己想要的域名后,加入清单!买买买。
  • 中间可能会进行实名认证等操作,我记性不好,弄完也差不多忘了。这里就不贴截图,您按步骤一步一步来就行。
  • 然后进入控制台 — > 域名与网站(sideBar) —> 域名
  • 发现你买的域名了吧,点屁股后面的解析

{%asset_img domain.png domian%}

  • 添加一个CNAME(如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录)的解析,然后主机记录想怎么填怎么填,最好还是填个blog之类的,以后其他记录还能用来做其他更有意思的页面。@记录做个主页之类的。记录值的话我这里以Coding举例,填写(pages.coding.me)就OK。其他的不用管,然后在coding pages设定里填上你绑定的域名。
  • 浏览器访问http://your.domain.com
  • well done !

总结

其实说简单也不容易,它还是花了我接近三天的时间。选主题就纠结了我很久,最后发现有些主题还不支持tags和categories,我也懒得自己去添加。最后决定用NexT主题,文档挺丰富(比Hexo的渣文档好哪去了),很多问题别人在GitHub issue里也提出了。所以省了很多心。在修改主题源码的过程中发现他们居然保留有一些custom.styl之类的文件,打开变量文件找到变量名后在custom文件里直接修改就覆盖了原来的配置,简直贴心到不行。这里给NexT的contributor们一颗小心心。

如果您在这篇文章中有遇到疑问或发现了问题,请发邮件 yggdrasilqh@gmail.com。我都会认真对待。

个人博客 查看原文

Computer Technology
Web note ad 1