hexo+github搭建博客

Hexo是一款基于Node.js的静态博客框架,配合github可以搭建属于自己的博客。

搭建环境

安装Node.js

Hexo需要node.js支持,可以到node.js中文网下载适合自己系统的安装包。安装也比较简单,一路next下去就可以了。

安装完后win + r 输入cmd回车,打开命令行界面,分别输入node -v 和npm -v,看到类似如下结果就说明安装成功了。

>node -v
v6.10.1
>npm -v
3.10.10

安装Hexo

在合适的地方建立一个文件夹,用于安装hexo框架和存放你的博客。我的文件夹是D:\devsoft\hexo。

命令行切换到hexo目录

C:\Users\tenny>d:

D:\>cd devsoft

D:\devsoft>cd hexo

D:\devsoft\hexo>

输入如下命令安装hexo到当前目录

npm install hexo-cli -g

命令行显示一系列安装详情,等待片刻,完成后,继续输入

npm install hexo --save

又会看到一堆信息,完成后,输入hexo -v检查下,看到类似如下信息,说明安装成功了。

D:\devsoft\hexo>hexo -v
hexo: 3.2.2
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 6.10.1
v8: 5.1.281.95
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k

配置Hexo

命令行还在hexo根目录,输入

hexo init

继续输入

npm -install

npm会自动安装需要的组件。之后输入

npm install hexo-deployer-git --save

hexo扩展,用于将博客发布到github上。

体验博客

本地博客

继续输入hexo g生成文件

D:\devsoft\hexo>hexo g
INFO  Start processing
INFO  Files loaded in 2.28 s
INFO  Generated: search.xml
INFO  Generated: sitemap.xml
INFO  Generated: atom.xml
INFO  Generated: index.html
INFO  Generated: categories/index.html
INFO  Generated: about/index.html
INFO  Generated: tags/index.html
INFO  Generated: archives/index.html
INFO  Generated: favicon.ico
INFO  Generated: archives/2017/04/index.html
......   //省略的文件信息

再输入hexo s启动服务

D:\devsoft\hexo>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中输入http://localhost:4000/ 就可以看到博客首页了。

要停止服务,在命令行按Ctrl + C。

建立博客仓库

进入https://github.com/ 登录自己的账号,新建一个仓库,命名为yourname.github.io(这个就是你博客的访问地址,一定要这种格式,否则无效)。例如我的tenny-peng.github.io。

关于安装git和github可以参考我的Git简单教程,这里就略过了。

建立好自己的博客仓库(yourname.github.io)后,打开hexo根目录下的_config.yml,找到Deployment,修改成如下内容

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

例如我的

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:tenny-peng/tenny-peng.github.io.git
  branch: master

编写博客

hexo根目录下执行

hexo new title "test"

然后在D:\devsoft\hexo\source_posts下就能看到test.md文件了。

.md文件是用MarkDown语法写的,关于MarkDown语法,可以参考我的MarkDown基础语法
MarkDown文件编辑器推荐用Atom,Atom是Github专门为程序员推出的一个跨平台文本编辑器。可以到https://atom.io/ 下载Atom,也可以找寻其他自己喜欢的MarkDown编辑器。

部署博客

文章编辑完后,使用命令生成,部署

hexo g      //生成静态文件
hexo d      //部署到github上

也可以直接执行以下命令,相当于上面两条命令一起执行

hexo d -g     //部署前先生成

部署完成后,访问https://yourname.github.io (例如我的https://tenny-peng.github.io) ,就可以看到生成的文章。

使用主题

主题可以使我们的博客更加个性化,更加美观,等等。
这里我使用了NexT主题,其他主题配置可参考其说明,下面以NexT为例。

安装NexT

Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。

如果你熟悉Git,建议你使用克隆最新版本的方式,之后的更新可以通过git pull来快速更新,而不用再次下载压缩包替换。这里我们使用git。

命令行切换到hexo根目录,执行

git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

找到hexo根目录下的站点配置文件_config.yml,修改theme

theme: next

设定Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新

找到主题next目录下的_config.yml(注意:不是hexo根目录下的配置文件,根目录下的是全局博客配置,这个是针对某个主题的配置),设定自己喜欢的Scheme,使用的去掉#,不使用的注释#。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

站点设置

编辑站点配置文件,设置博客标题,作者,语言等,更多配置可自行查询。

# Site
title: Tenny's Blog
author: Tenny Peng
language: zh-Hans     //简体中文

菜单配置

编辑主题配置文件,设置首页分类标签等目录,更多配置可自行查询。

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags

这里设定的目录都必须手动创建在hexo/source目录下,否则发布到github上是找不到的。

头像设置

编辑主题配置文件,修改avatar(如没有可新建)

avatar: /images/avatar.jpg

这里的图片需要放在主题目录下(themes/next/source/images/avatar.jpg),而不是站点目录。

网站图标

编辑主图配置文件,修改favicon

favicon: /favicon.ico

然后将favicon.ico放在hexo/source目录下即可。

以上基本就完成了个人博客的搭建,更多信息可参考:

史上最详细的Hexo博客搭建图文教程

hexo官网

next文档

posted @ 2019-09-18 15:56  淘气小饼干  阅读(236)  评论(0编辑  收藏  举报