Hexo + Github搭建静态博客(一)

快速介绍

Hexo是一个基于Node.js搭建的静态博客框架,通过Hexo,用户可以以博文的方式发布Markdown文档。结合默认或定制化主题模板(很像其他静态博客生成框架,Jekyll或Ghost)博文会被转化和生成为HTML/CSS。Hexo所需的所有组件都是模块化的,可以按需安装。

提前准备

你可能需要提前准备:

  1. git
  2. Node.js
  3. Github账号

第一步 安装和初始化Hexo

这一步需要安装好Hexo所需的东西,Hexo是有许多软件包组成的,而最必要的一个就是npm,Node.js包管理器。

首先,安装hexo-cli,最重要最核心的Hexo命令。

$ npm install hexo-cli -g

其次,需要创建一些基础文件,很幸运,Hexo提供了一键生成的命令。只需要切换到准备好的文件夹目录,执行如下命令。

$ hexo init 

此时,文件夹下可能会出现很多文件和文件夹,如下图所示:

blog/
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
└── theme

4 directory, 2 files

第二步 设置Hexo主要的配置文件 _config.yml

上图的这些文件中,_config.yml是至关重要的,所有的核心配置都存储在这个博客中,如果将来想调整博客的一些设置,大概率就是这个文件。

我们将会一步一步的修改配置,选择喜欢的编辑器,vi, nano 或者sublime等打开_config.yml,在最上边会看到如下的内容。

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

前四行分别是博客的名称,二级名称,描述和作者的名称。目前不是所有的Hexo主题都会显示这些信息,所以它大多数当成网站基本信息。

后边两行是语言和时区,语言选择两字符ISO 639-1代码。时区默认指的是用户服务器的时区,用“tz database"格式。你可以根据需要修改他们,下边是一个例子:

#Site
title: 滴滴云博客 
subtitle: 为开发者而生 
description: 滴滴云基于滴滴出行的业务技术和经验积累,采用领先的云计算架构、高规格服务器集群搭建、高性能资源配置机制、精细化运营模式,致力于为开发者提供简单快捷、高效稳定。
author: didicloud 
language: zh-CN 
timezone: 

最后要更改的设置是default_layout: 在Writing下边,在一个博文没发表之前,它是不可见的,我们想存成草稿,所以把default_layout设置成draft。

# Writing
new_post_name: :title.md # File name of new posts
default_layout: draft
titlecase: false # Transform title into titlecase

第三步 创建和发表博客

用如下命令来创建一个博文(草稿),这里的‘first-page’是博文的名称。

$ hexo new first-post

应该会看到这样的显示:

Output
INFO  Created: ~/hexo_blog/source/_drafts/first-post.md

可以选择自己喜欢的编辑器,打开first-post.md

每一个博文都有一个front-matter设置,Front-matter是一个JSON or YAML块,它可以用来设置这标题,发布时间,标签等等。Front-matter一般用---或者;;;标志结尾。在Front-matter之后,可以用Markdown语法写自己的博文。

用如下的内容替换first-post.md的内容。

title: 滴滴云--为开发者而生
tags:
  - Test
  - Blog
categories:
  - Hexo
comments: true
date: 2018-11-04 00:00:00
---

## Markdown goes here.

**This is our first post!**

然后执行$ hexo publish first-post会看到如下的结果:

Output
INFO  Published: ~/hexo_blog/source/_posts/first-post.md

第四步 启动服务器

到目前为止,所有的配置文件和博文都已准备完毕,接下来启动服务器。

$ hexo server

现在可以访问自己的博客通过http://localhost:4000。你会看到自己预设的hello-world博客,ctrl+c可以停止服务器。
Hexo + Github搭建静态博客(一)_第1张图片

第五步 设置部署脚本

到目前为止,Hexo有许多不同的方法可以部署,本博客是用git来进行存储,上传,托管博客。除此之外,还支持Heroku, Git, Rsync, OpenShift, FTPSync等多种工具。

这里需要一个git仓库来存储Hexo生成的静态HTML文件,为了简单起见,这里用Github提供的git仓库。

在Github上创建一个.Github.io的仓库,选择“Public”,并且点击“Initialize this repository with a README”选择框。然后打开_config.yml。

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

按如下所示,填上deploy选项,你必须替换username为自己的Github账号。


deploy:
  type: git
  repo: https://Github.com/username/username.Github.io.git
  branch: master

因为选择了git来部署,所以我们需要安装Hexo包来发布静态模板到git仓库。用npm来安装:

$ npm install hexo-deployer-git --save

现在可以部署代码到Github仓库了。

$ hexo generate && hexo deploy

在Github密码校验框输入密码以后,如下是成功结果。

hexo HEXO G
INFO  Start processing
INFO  Files loaded in 214 ms
INFO  Generated: archives/2018/index.html
INFO  Generated: repository/index.html
INFO  Generated: archives/index.html
INFO  Generated: about/index.html
INFO  Generated: archives/2018/11/index.html
INFO  Generated: index.html
INFO  Generated: angular-splitter/index.html
INFO  Generated: 如何使用GZIP来优化你的网站/index.html
INFO  8 files generated in 231 ms
➜  hexo HEXO D
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 143ec29] Site updated: 2018-11-04 23:14:03
 8 files changed, 80 deletions(-)
To https://Github.com/guguji5/guguji5.Github.io.git
   c8f0b04..143ec29  HEAD -> master
Branch master set up to track remote branch master from https://Github.com/guguji5/guguji5.Github.io.git.
INFO  Deploy done: git

结语

至此,完成了所有配置和部署,快去搭建属于自己的静态博客吧。以下链接为Hexo搭建起来的博客,可以参考。

  1. https://guguji5.Github.io/
  2. https://kouss.com/

Hexo的子页面包括归档、分类,标签使用,github项目的关联,ejs模板的使用将在下一篇《Hexo + Github搭建静态博客(二)》中给大家分享。

相关文章:

在滴滴云DC2服务器上搭建DPDK应用实例
基于滴滴云虚拟机的TensorFlow搭建与使用
Linux进程网络流量统计方法及实现
Ceph架构原理及使用场景介绍

更多开源工具教程和使用可以访问滴滴云。

本文作者:杜宽

你可能感兴趣的:(云计算,开源)