独立博客的搭建

写作,一直是思考和表达的一种重要的途径,而博客是一个很好的表达和分享的平台。网络上的博客平台有很多,自己也有在用简书Lofter。但同时作为一个理想主义的程序员,总是向往更加简单和自由的写作方式。由此,经过一番折腾,才有了我的第一个独立博客以及这篇博客搭建的文章。

废话少说,先上博客:点击访问我的博客


Github+Hexo

博客程序有很多,也都有各自的优缺点,关于选用哪一个,也因人而异,毕竟适合自己的才是做好的。

可以看这一篇进行了解 : 各种博客程序有什么特点

我所选用的是Github+hexo进行搭建。理由如下:

  • 用 Node.js 搭建的博客平台,速度快,免费
  • Hexo 操作比 Jekyll 简单,命令少,易于记忆。
  • 搭建在 Github 上,Github稳定,空间免费。

搭建环境

1. 安装 Git

Git是目前世界上最先进的分布式版本控制系统。在这里主要用来把本地内容提交到github上区。

安装方式:

  1. 下载
    http://msysgit.github.io/
  2. 安装
    安装过程中,询问是否修改环境变量,选择“Use Git Bash Only”. 即只在msysGit提供的Shell

运行 Git 前的配置

  1. 配置你个人的用户名称和电子邮件地址

$ git config --global user.name "xxx"
$ git config --global user.email xxx@example.com

  1. 配置GitHub SSH
    (1)首先使用 ssh-keygen 生成 SSH 密钥
    $ ssh-keygen -t rsa -C "youremail@163.com"
    (2) 配置Github SSH。
    登陆GitHub->Settings->“SSH Keys”,然后,点“Add SSH Key”,起个Title,在Key文本框里粘贴id_rsa.pub文件的内容,点“Add Key”。

2. 安装 node.js

  1. 下载
    下载:http://nodejs.org/download/
    作用:用来生成静态页面

配置Github

Github网址:https://github.com/
作用:用来做远程博客的仓库

1. 建立Repository

建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io

2. 配置SSH-Key

参考http://www.cnblogs.com/zhcncn/p/3787849.html

搭建 Hexo

1. 安装

打开Git命令行,执行如下命令

$ npm install -g hexo

2 Quick Start

1. 建立你的博客

在电脑中建立一个文件夹(比如我建在了D:\blog),然后在此文件夹中右键打开Git Bash。执行下面的命令

$ hexo init 
[info] Copying data 
[info] You are almost done! Don't forget to run `npm install` before you start b logging with Hexo!

Hexo随后会自动在目标文件夹建立网站所需要的文件。然后按照提示,运行 npm install(在 /D/blog下

npm install

会在D:\blog目录中安装node\_modules

2. 打开服务

运行下面的命令(在 /D/blog下)

$ hexo server 
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

表明Hexo Server已经启动了,在浏览器中打开 http://localhost:4000/,这时可以看到Hexo已为你生成了一篇blog。

你可以按Ctrl+C停止Server。

文件目录为

blog
_config_yml -- 注配置文件
db.json --数据
debug.log -- 调试日志
_node_mudules -- nodejs 相关依赖
package.json -- 配置依赖
scaffolds -- 脚手架 - 也就是一个工具模板
source -- 存放blog正文的地方
themes -- 存放皮肤的地方

3. 创建一篇文章

新打开一个git bash命令行窗口,cd到/D/blog下,执行下面的命令

$ hexo new "My New Post"

刷新http://localhost:4000/,可以发现已生成了一篇新文章 "My New Post"。

注意

在创建文章时,要ctrl+c关掉hexo server

4. 生成静态页面

执行下面的命令,将你自己写的markdown文件生成静态网页。

$ hexo generate

该命令执行完后,会在 D:\blog\public\ 目录下生成一系列html,css等文件。

5. 编辑文章

hexo new "My New Post"会在D:\blog\source\_posts目录下生成一个markdown文件:My-New-Post.md

可以使用一个支持markdown语法的编辑器(推荐MarkEditor 或 Sublime Text 2)来编辑该文件。

6. 部署到Github

部署到Github前需要配置_config.yml文件,首先找到下面的内容

# Deployment 
## Docs: http://hexo.io/docs/deployment.html 
deploy: 
type:

将它们修改为

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:chuanqiang/chuanqiang.github.io.git
branch: master

7. 测试

当部署完成后,在浏览器中打开http://chuanqiang.github.io/ 正常显示网页,表明部署成功。

Hexo 命令总结

1. 常用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

2. 复合命令

hexo deploy -g  #生成加部署
hexo server -g  #生成加预览

命令的简写为:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

为博客添加域名

1. 域名购买

网站:推荐去GoDaddy 购买
优点:安全,支持支付宝。
注意

  • 注册时用户填写信息时一定要输入正确的邮箱名字。
  • 买完域名之后一定要记得去自己的邮箱查看激活邮件,否则域名激活不了。

2.域名和 Github 空间绑定

1. GitHub Pages的设置

方法1:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,不用写http://,直接写域名。比如我的是qixiantong.info
方法2:到我的github仓库,点击右下角的「Download ZIP」,下载源文件,解压,修改CNAME,改成你想要的域名,放进Hexo\source目录下,用hexo命令提交上去。

2.DNS设定

网站DNSpod
步骤

  1. 登录或者注册DNSpod
  2. 之后进入到了域名下一解析管理窗口,这里需记录两个记录值:\
f1g1ns1.dnspod.net.
f1g1ns2.dnspod.net.
  1. 点击添加记录,按图所述:
  1. 等待全球递归DNS服务器刷新(最多72小时)。

Hexo 配置

1. 配置文件介绍

文件名:_config.yml(在文件根目录下)

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/tommy351/hexo/

# Site #整站的基本信息
title: 1000 words a Day #网站标题
subtitle: Writing 1000 Words a Day Changes My Life #网站副标题
description: 学习总结 思考感悟 知识管理 #网站描述
author:  cnFeat #网站作者,在下方显示
email: cnFeat@gmail.com #联系邮箱
language: zh-CN

# URL
## If your site is put in a subdirectory
url: http://www.cnfeat.com #你的域名
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
enable: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: 0.0.0.0
logger: false
logger_format:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 15 #每页15篇文章
pagination_dir: page

# Disqus #社会化评论disqus,我使用多说,在主题中配置
disqus_shortname:

# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: jacman
exclude_generator:
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#sitemap
sitemap:
path: sitemap.xml

#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

# Markdown
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true

# Stylus
stylus:
compress: false

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:chuanqiang/chuanqiang.github.io.git
branch: master      

2. 修改局部页面

页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\jacman\中:

├── languages  #多语言
|   ├── default.yml#默认语言
|   └── zh-CN.yml  #中文语言
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
|   ├── _partial   #局部的布局,此目录下的*.ejs是对头尾等局部的控制
|   └── _widget#小挂件的布局,页面下方小挂件的控制
├── source #源码
|   ├── css#css源码 
|   |   ├── _base  #*.styl基础css
|   |   ├── _partial   #*.styl局部css
|   |   ├── fonts  #字体
|   |   ├── images #图片
|   |   └── style.styl #*.styl引入需要的css源码
|   ├── fancybox   #fancybox效果源码
|   └── js #javascript源代码
├── _config.yml#主题配置文件
└── README.md  #用GitHub的都知道

安装主题

1. 下载主题

这里以我安装的主题为例。
如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。
在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。

启用 NexT 主题

theme: next 

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug),整个命令是 hexo s --debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

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

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

现在,已经成功安装并启用了 主题。下一步要做的是更改一些主题的设定,包括个性化以及集成第三方服务。这个因主题而异。

3. 主题设定

这里叙述的是各主题通用的功能。

设定语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-Hans

多说评论

注意:duoshuo_shortname 不是你的多说登录的 id

使用多说前需要先在 多说 创建一个站点。具体步骤如下:

  1. 登录后在首页选择 “我要安装”。
  2. 创建站点,填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo\_shortname,如图:
  1. 创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。
    【eg】:
duoshuo_shortname: iissnan-notes

百度统计

注意: baidu_analytics 不是你的百度 id 或者 百度统计 id

  1. 登录 百度统计, 定位到站点的代码获取页面
  2. 复制 hm.js? 后面那串统计脚本 id,如:
  1. 编辑 站点配置文件, 新增字段 baidu_analytics 字段,值设置成你的百度统计脚本 id

分享

JiaThis

编辑 站点配置文件, 添加字段 jiathis,值为 true。

JiaThis 内容分享服务配置示例

# JiaThis 分享服务
jiathis: true

百度分享

编辑 站点配置文件,添加字段 baidushare,值为 true。

百度内容分享服务配置示例

# 百度分享服务
baidushare: true

多说分享
多说分享必须与多说评论同时使用
编辑 站点配置文件, 添加字段 duoshuo_share, 值为 true。
多说内容分享服务配置示例

# 多说分享服务
duoshuo_share: true

404页面

GitHub Pages有提供制作404页面的指引:Custom 404 Pages
直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

推荐使用腾讯公益404。为公益尽自己的一份微薄之力。

总结

博客的搭建看似简单,其实过程中还是有许多磕磕绊绊。这时,需要的就是自己解决问题的能力:如何利用互联网搜索你需要的答案,如何借鉴别人的经验。这个也是搭建博客之外的宝贵收获。

另外,博客只是一种输出和展现形式,关键还是在于内容本身。盛酒的容器美观与否固然重要,但瓶子里酒的味道才是真谛。所以,重要的还是不断输入和输出

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容