0%

Github+Hexo搭建个人博客

一、博客安装

1.安装hexo包

1
2
3
$ npm install -g hexo-cli

$ npm install -g hexo

2.初始化

1
hexo init blog

稍微等待下,速度有点慢。成功提示
INFO Start blogging with Hexo!

速度太慢解决

  1. 到码云把:https://github.com/hexojs/hexo-starter.git复制过去
  2. 从码云下载: git clone https://gitee.com/pasaulis/hexo-starter.git

3. 安装依赖

1
2
cd blog
cnpm install

4.本地查看

因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以直接执行下方命令

1
2
3
4
5
6
7
8
$ hexo generate 

$ hexo g //每次进行相应改动都要hexo g 生成一下


$ hexo server //启动本地服务器

$ hexo s //启动服务预览

现在已经搭建好本地的 Hexo 博客了,执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦
在浏览器输入 http://localhost:4000/ 就可以看见网页和模板了

5.配置github的SSH keys(略过)

二、配置博客

_config.yml是配置文件,这个文件我们会经常用到,后面也会介绍具体可以配置哪些信息。

  • source是资源文件夹,用来存放我们的markdown文件。
  • themes文件夹是用来放置主题的
  • 博客名字及作者信息:_config.yml
  • 个人介绍页面:about.md
  • 代表作页面:milestone.md

    2.1 配置_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    title: **My Blog** #博客名
    subtitle: to be continued... #副标题
    description: My blog #给搜索引擎看的,对网站的描述,可以自定义
    author: **Yourname** #作者,在博客底部可以看到
    email: yourname@yourmail.com #你的联系邮箱
    language: **zh-CN** #中文。如果不填则默认英文
    timezone: Asia/Shanghai
    # URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    # Writing 文章布局、写作格式的定义,不修改
    # Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文
    # Server 不修改
    # Date / Time format 日期格式,可以修改成自己喜欢的格式
    # Pagination 每页显示文章数,可以自定义,贴主设置的是10
    # Disqus Disqus插件,我们会替换成“多说”,不修改
    Extensions 这里配置站点所用主题和插件,暂时默认

2、配置 Deploy

接下来配置 GitHub 设置,类型设置为 git ,指定好 repo 地址,branch 必须设置为master,因为 GitHub Page 只会从 mater 分支生成。(注意有坑:这里我们需要单独设置好在 GitHub 上使用 name 和 email ,否则将会使用 global 的user.name 和 user.email ,囧~~):

Deployment 站点部署到 github 要配置

1
2
3
4
5
6
7
8
deploy:
type: git //type字段对应的是部署的服务器类型,我们在这边填写git即可
repository: https://github.com/username/username.github.io.git
或 repo: username/username.github.io // 创建的github仓库的地址
或 repo: git@github.com:username/username.github.io.git
name: username
email: username@gmail.com
branch: master

三、推送到 github

  • 在github新建仓库:仓库名必须为 <user-name>.github.io 格式,其中 <user-name> 是你 github 的昵称

1.安装自动推送到github工具

完成上述配置后,在终端执行

1
$ cnpm install hexo-deployer-git --save # 安装该工具

这个操作主要是为了把我们写好的文章部署到 github 服务器上并可以被别人浏览。

题外话,这里简单说一下 hexo-deployer-git 插件的工作流程:当执行部署操作的时候,

  • 首先会自动初始化 git 仓库(位置在 .deploy_git 中),并关联到指定 repo 与 branch ,后续 public 文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。
  • 若修改了 name 和 email ,需要删掉整个 .deploy_git 再重新部署才会生效。有兴趣的可以看下 hexo-deployer-git 的源码。

2.推到git仓库

1
2
3
4
5
6
7
//清除?
hexo clean
//部署
hexo deploy

//或
hexo d -g // 生成和部署

打开查看:https://chenxi188.github.io

四、写新文章及清除原数据

1.创建一篇名为test.md的文章

1
hexo new test_md

这步完成会生成文章 test-md.md 说明:

1
2
3
4
5
6
7
8
title: Hello World
date: 2018/6/7 19:45:12
categories: // 分类
- Diary
tags: // 标签
- PS3
- Games
comments: false // 评论功能,默认开启

1.2 修改文章模板

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件 post.md 来建立文章,因此我们可以修改它建立自己的文章模板,我的模板如下:

1
2
3
4
5
6
7
8
title: {{ title }}
date: {{ date }}
tags:
-
categories:
-
comments:
password:

2.编写文章

  1. 一步完成会生成文章 test-md.md
  2. 找到该文章,打开,
  3. 在 test_md.md 中输入内容后,保存一下。
    使用 Markdown 语法,该语法介绍可以查看利用HEXO搭建的博客及Markdown语法介绍

3.清除原数据,为发布新文章做准备

然后执行下列步骤

1
hexo clean

INFO Deleted database.
INFO Deleted public folder.

五、发布新文章

1.发布

1
2
3
4
5
hexo generate 

hexo g
INFO Start processing
INFO Files loaded in 1.48 s

2.本地查看文章

1
2
3
$ hexo server 

$ hexo s

即可在本地查看新发布的文章

3. 发布到网上,执行:

1
2
3
$ hexo deploy 

$ hexo d

即可在网上查看新发布的文章

六、换主题

1.下载主题

https://hexo.io/themes/

1
2
$ cd your-hexo-site
$ git clone https://gitee.com/pasaulis/hexo-theme-next.git themes/next #放到themes名为next

2. 启用主题

启用新下载的主题,在刚打开的的 _config.yml 文件中(hexo根目录中),找到“# Extensions”,把默认主题 landscape 修改为刚刚下载下来的主题名:
修改主目录下的 _config.yml,指向我们刚刚 clone 的主题:

1
theme: next # 启用 NexT 主题

到此,NexT 主题安装完成。

3.验证(可选)

1
2
3
hexo clean

hexo s --debug

4.更新最新主题(可选)

git bash 里执行

1
2
$ cd themes/主题名
$ git pull #更新

5、本地查看调试

每次修改都要 hexo g 生成一下

1
2
3
hexo clean
$ hexo g # 生成
$ hexo s # 启动本地服务,进行文章预览调试,退出服务用Ctrl+c

浏览器输入
localhost:4000 预览效果

6.发布到网上

1
hexo d

七、主题设定(这一部分的修改都在该theme下的config.yml 文件中)

1、选择 Scheme

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

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
  • 搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

https://www.jianshu.com/p/2511a362f5d1

总结:常用说明/命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
hexo generate      // 简写:hexo g,生成静态文件,会在当前目录下生成一个public文件夹
hexo server // 简写:hexo s,启动本地服务,用于博客的预览
hexo deploy // 简写:hexo d,部署到远程(如GitHub,可以在_config.yml中配置)
hexo new post-name // 简写:hexo n post-name, 新建文章
hexo new page page-name //简写:hexo n page page-name,新建页面


hexo d -g // 生成和部署
hexo s -g // 生成和预览


hexo help # 查看帮助
hexo init # 初始化一个目录
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成网页,可以在 public 目录查看整个网站的文件
hexo server # 本地预览,'Ctrl+C'关闭
hexo deploy # 部署.deploy目录
hexo clean # 清除缓存,强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹


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

hexo new "标题"

目录说明

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── \_drafts #草稿
| └── \_posts #文章
├── themes #主题
├── \_config.yml #全局配置文件
└── package.json

全局配置:根目录/__config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# Hexo Configuration
# Docs: Configuration
# Source: GitHub - hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.
# Site #站点信息
title: #标题
subtitle: #副标题
description: #站点描述,给搜索引擎看的
author: #作者
email: #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
enable: true #是否启用
line_number: true #显示行号
tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考Moment.js | Docs
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
type: git
repo: 刚刚github创库地址.git
branch: master

注意
• 配置文件的冒号“:”后面有一个空格
• repo: 刚刚 github 创库地址 .git