Hello Hexo

快速、简洁且高效的博客框架 – Hexo

  • 如果你对默认配置满意,只需几个命令便可秒搭一个hexo。
  • 如果你跟我一样喜欢折腾下,30分钟也足够个性化。
  • 如果你过于喜欢折腾,可以折腾个把星期,尽情的玩。

不知道从什么时候开始,静态博客流行开来.是因为Github Page么. 而Hexo看起来是这类博客中最优秀的

从一天前开始,配置Hexo并部署到了Github Page和自己的VPS.将过程总结如下

准备工作

PS: 除了npm,其他的可以等最后再做

安装node和npm

node官网
npm官网

brew install node
brew install npm

域名指向你的服务器

  1. DNS解析可以使用DNSPod
  2. DNSPod添加A记录指向你的服务器IP即可
  3. 如果是Github Page的话,推荐使用CNAME做跳转而不是指向IP

配置git和Github

git配置略

注册Github账号,并新建 kdwycz.github.io 的库

(kdwycz换成你自己的用户名,下同)

配置VPS的nginx

我使用的VPS是DigitalOcean

而DigitalOcean上有详尽的配置各种环境的教程,业界良心,按照下面一步步做就好

How To Install Nginx on Ubuntu 14.04 LTS

How To Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu 14.04 LTS

配置VPS的git和git hock

这个是实现一键更新,当然还有FTP等其他方式也能实现

git仓库

cd ~
mkdir blog.git && cd blog.git
$ git init --bare

远程访问的地址是 kdwycz@blog.kdwycz.com:blog.git,master

Git hooks

把静态页面传到git,并不能直接部署.我们可以写一个hock来实现自动部署

cd ~/blog.git/hooks
touch post-receive
chmod +x post-receive
vim post-receive
#!/bin/bash -l
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/blog.kdwycz.com
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

待之后配置完成后 hexo d -g 就能一键更新

本地运行

Hello World

如官网所言,安装运行Hexo只需要以下几行命令:

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

配置文件

编辑配置文件 _config.yml 部分注释~

# Site
title: kdwycz's blog
subtitle: 愚人之旅
description: kdwycz | coding | python # 这个是给搜索殷勤检索用
author: kdwycz
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.kdwycz.com/ # 你的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: true

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
disqus_shortname: kdwycz # Disqus配置
theme: yelee # 选择一个你喜欢的主题

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
# 这个我们在插件中说

看起来除了最上面的部分需要自己写的也不多…

新文章

写文章的话,要执行hexo new "postName"命令,生成指定名称的文章至source_posts\postName.md。

编辑md文件,会发现上面几行…也是配置文件,需要自己填下

title: Hello Hexo # 文章标题
date: 2015-11-30 18:27:30
categories: [skill] # 分类
tags: [hexo,npm] # 标签
---
以下为正文

生成静态文件

执行命令 hexo g 静态文件生成在public文件夹

其实这时已经可以把它上传到空间或者Github了

(不要这么没追求QwQ)

进一步配置

主题

安装主题的通用方法是

  • cd themes
  • git clone 主题地址 主题名字命名的文件夹
  • blog下的 _config.yml 设置 theme
  • 主题文件夹下的 _config.yml 进行进一步配置

Hexo Themes

插件

我安装的插件如下~具体使用方法见官网

npm install hexo-deployer-git --save
npm install hexo-generator-search --save
npm install hexo-generator-feed --save
npm install hexo-generator-seo-friendly-sitemap --save

部署

部署也需要安装插件,官网文档

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  message: update
  repo:
    s1: [email protected]:kdwycz/kdwycz.github.io.git,master
    s2: [email protected]:kdblog.git,maste

之后 hexo d -g 即可

参考资料


Hello Hexo
https://blog.kdwycz.com/archives/hello-hexo/
作者
kdwycz
发布于
2015年11月30日
许可协议