基于github与hexo搭建个人博客

89327060 2020-01-08

 1.Hexo简单实用

   hexo中文文档:https://hexo.io/zh-cn/docs/

1.1什么是hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

 1.2安装hexo

1.hexo基于node.js,所以需要先安装node.js

2.安装 Hexo

(1)全局安装hexo

cnpm install hexo -g

(2)查看版本

$ hexo -v
hexo-cli: 3.1.0
os: Windows_NT 6.3.9600 win32 x64
node: 12.13.1
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

1.3Hexo使用

1.建站:(创建一个基本的hexo项目)

hexo init hexo_test
cd hexo_test
npm install

   上面是克隆一个项目并且用npm下载相关依赖。

新建完成后,指定文件夹的目录如下:

.

├── _config.yml

├── package.json

├── scaffolds

├── source

|   ├── _drafts

|   └── _posts

└── themes

(1)_config.yml:网站的配置信息,可以在此配置大部分的参数。

(2)package.json:应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装。

(3)scaffolds:模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

(4)source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去

(5)themes:主题 文件夹。Hexo 会根据主题来生成静态页面。

2.命令简介

1.  init

hexo init [folder]

新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

2.  new

hexo new [layout] <title>

新建一篇文章。layout支持的参数有:post, page, draft。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

hexo new "post title with whitespace"
参数描述
-p--path自定义新文章的路径
-r--replace如果存在同名文章,将其替换
-s--slug文章的 Slug,作为新文章的文件名和发布后的 URL

默认情况下,Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说,Hexo 会创建一个以标题为名字的目录,并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录:

hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件,同时 Front Matter 中的 title 为 "About me"。title 是必须指定的!

3.  generate  可以简写为g

hexo generate

生成静态文件。也就是将md文件生成静态的html文件,有点类似于vue-cli的用法,将vue文件生成最终的静态文件。

选项描述
-d--deploy文件生成后立即部署网站
-w--watch监视文件变动
-b--bail生成过程中如果发生任何未处理的异常则抛出异常
-f--force强制重新生成文件
Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。
使用该参数的效果接近 hexo clean && hexo generate
-c--concurrency最大同时生成文件的数量,默认无限制

4.  publish

hexo publish [layout] <filename>

发表草稿。

5.  server  可以简写为s

hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/。

选项描述
-p--port重设端口
-s--static只使用静态文件
-l--log启动日记记录,使用覆盖记录格式

6.  deploy  可以简写为d

hexo deploy

部署网站。

参数描述
-g--generate部署之前预先生成静态文件

7.  list

hexo list <type>

列出网站资料。type支持的参数为:page, post, route, tag, category

例如:

$ hexo list post
INFO  Start processing
Date        Title        Path                   Category  Tags
2020-01-07  Hello World  _posts/hello-world.md

3.启动服务进行访问测试

1535 MINGW64 ~/Desktop/hexo_test
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

访问:

基于github与hexo搭建个人博客

4.修改默认配置

/hexo_test/_config.yml 简单修改作者信息:

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

# Site
title: "QiaoZhi‘s Blog"
subtitle: ‘简单的记录,莫大的方便!!!‘
description: ‘没有最好,只有更好!!!‘
keywords:
author: QiaoZhi
# 简体中文
language: zh-Hans
# 上海时区
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://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing ‘index.html‘ from permalinks
  trailing_html: true # Set to false to remove trailing ‘.html‘ from permalinks

# 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:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ‘‘
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ‘‘
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = ‘‘)
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ‘‘
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## Use post‘s date for updated date unless set in front-matter
use_date_for_updated: false

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

# Include / Exclude file(s)
## include:/exclude: options only apply to the ‘source/‘ folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

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

关于更全的配置参考:https://hexo.io/zh-cn/docs/configuration

5.写作

你可以执行下列命令来创建一篇新文章或者新的页面。

hexo new [layout] <title>

可以在命令中指定文章的布局(layout),默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

1.布局:

Hexo 有三种默认布局:post、page 和 draft。在创建者三种不同类型的文件时,它们将会被保存到不同的路径;而自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局路径
postsource/_posts
pagesource
draftsource/_drafts

2. 文件名称:

Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称,举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量描述
:title标题(小写,空格将会被替换为短杠)
:year建立的年份,比如, 2015
:month建立的月份(有前导零),比如, 04
:i_month建立的月份(无前导零),比如, 4
:day建立的日期(有前导零),比如, 07
:i_day建立的日期(无前导零),比如, 7

3. 草稿

草稿是 Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。

hexo publish [layout] <title>

草稿默认不会显示在页面中,您可在执行时加上 --draft 参数,或是把 render_drafts 参数设为 true 来预览草稿。

4. 模版(Scaffold)

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:

hexo new photo "My Gallery"

在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章,以下是可以在模版中使用的变量:

变量描述
layout布局
title标题
date文件建立日期

5. 测试

(1)新建一个page和一个post页面

1535 MINGW64 ~/Desktop/hexo_test
$ hexo new post1
INFO  Created: ~\Desktop\hexo_test\source\_posts\post1.md

-1535 MINGW64 ~/Desktop/hexo_test
$ hexo new page page1
INFO  Created: ~\Desktop\hexo_test\source\page1\index.md

(2)编辑上面新建的文件

post1.md:

---
title: post1
date: 2020-01-07 11:17:40
tags:
---
# 这里是page1

page1/index.md

---
title: page1
date: 2020-01-07 11:17:56
---
# 这里是page1

(3)访问测试:

基于github与hexo搭建个人博客

基于github与hexo搭建个人博客

6. 编写一篇文章介绍markdown的语法

(1)创建文章

$ hexo new Markdown使用介绍
INFO  Created: ~\Desktop\hexo_test\source\_posts\Markdown使用介绍.md

(2)其内容如下

---
title: Markdown使用介绍
date: 2020-01-07 12:02:20
tags: ‘markdown‘
---

推荐一个markdown在线编辑器:http://mahua.jser.me/

# 1.标题
Markdown 标题有两种格式。
## 1.使用 = 和 - 标记一级和二级标题(必须超过3个)
= 和 - 标记语法格式如下:
```
我展示的是一级标题
===

我展示的是二级标题
-----------------
```
结果如下:
![mk 图标](/img/Markdown使用介绍/2020-01-07_14-25-04.png)
## 2.使用#标记
使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。注意连续的#后面有空格。
```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```
结果如下:
![mk 图标](/img/Markdown使用介绍/2020-01-07_14-46-14.png)
# 2.段落格式
Markdown 段落没有特殊的格式,直接编写文字就好。
## 1. 字体
支持的字体如下:
```
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
```
结果:
![mk 图标](/img/Markdown使用介绍/2020-01-07_14-54-25.png)
## 2. 分割线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:
```
***

* * *

*****

- - -

----------
```
## 3. 删除线
如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可
```
~~BAIDU.COM~~
```
## 4.下划线
下划线可以通过 HTML 的 \<u\> 标签来实现:
```
<u>带下划线文本</u>
```
# 3.列表
Markdown 支持有序列表和无序列表。

## 1.无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记:
```
* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项
```
结果:
* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项
## 2. 有序列表使用数字并加上 . 号来表示,如:
```
1. 第一项
2. 第二项
3. 第三项
```
结果:
1. 第一项
2. 第二项
3. 第三项

## 3.列表嵌套:
列表嵌套只需在子列表中的选项添加四个空格即可:
```
1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
```
结果:
1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
    
# 4.markdown区块
Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号:
```
> 区块引用
> 区块链
> NP
```
结果:
![mk 图标](/img/Markdown使用介绍/2020-01-07_15-18-58.png)
另外区块是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推退。区块中也可以使用列表,列表中也可以使用区块:
```
> 最外层
> > 第一层嵌套
> > > 第二层嵌套

 
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项
```
结果:
![mk 图标](/img/Markdown使用介绍/2020-01-07_15-26-02.png)
#### 补充:关于区块分割
为了使系统认为我们第一个区块已经‘完全‘结束,我们需要在第一个区块后键入一个换行,然后键入一个全角空格,然后就可以继续使用‘>‘来开始第二个引用区块。
例如:
```
> 最外层

 注意左边有个全角的空格
> 第一层嵌套
```
结果:
![mk 图标](/img/Markdown使用介绍/2020-01-07_15-48-56.png)

# 5.markdown代码
## 1.如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:
```
`printf()` 函数
```
结果:
`printf()` 函数

## 2.代码区块使用 4 个空格或者一个制表符(Tab 键)。
例如:
![mk 图标](/img/Markdown使用介绍/2020-01-07_17-47-55.png)

## 3.也可以用 ``` 包裹一段代码,并指定一种语言(也可以不指定):
例如:
![mk 图标](/img/Markdown使用介绍/2020-01-07_17-49-10.png)

# 6.markdown链接
链接使用方法如下:
```
[链接名称](链接地址)
或者
<链接地址>
```
例如:
```
[百度](http://baidu.com)
<http://baidu.com>
```
结果:
[百度](http://baidu.com)
<http://baidu.com>

### 补充:高级链接
链接也可以用变量来代替,文档末尾附带变量地址。例如:
![mk 图标](/img/Markdown使用介绍/2020-01-07_17-58-58.png)

# 6.markdown图片
图片语法格式如下:
```
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
```
开头一个感叹号 !
接着一个方括号,里面放上图片的替代文字
接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 ‘title‘ 属性的文字。
例如:
```
![md 图标](/img/Markdown使用介绍/404.png)
![md 图标](/img/Markdown使用介绍/2020-01-07_17-49-10.png "悬浮上来你试试")
```
结果:

![md 图标](/img/Markdown使用介绍/404.png)
![md 图标](/img/Markdown使用介绍/2020-01-07_17-49-10.png "悬浮上来你试试")

# 7.markdown表格
Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。
对齐方式:
* -: 设置内容和标题栏居右对齐。
* :- 设置内容和标题栏居左对齐。
* :-: 设置内容和标题栏居中对齐。
    
例如:
![md 图标](/img/Markdown使用介绍/2020-01-07_18-09-02.png)

# 8.markdown其他
## 1.支持的 HTML 元素
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有:\<kbd\> \<b\> \<i\> \<em\> \<sup\> \<sub\> \<br\>等 。
## 2.转义
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符。
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
```
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号
```

效果:  https://qiao-zhi.github.io/2020/01/07/Markdown%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/#more

2.hexo切换next主题

1.下载

到网站根目录执行:

1535 MINGW64 ~/Desktop/hexo_test
$ pwd
/c/Users/Administrator/Desktop/hexo_test

-1535 MINGW64 ~/Desktop/hexo_test
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
Cloning into ‘themes/next‘...
remote: Enumerating objects: 12037, done.
remote: Total 12037 (delta 0), reused 0 (delta 0), pack-reused 12037
Receiving objects: 100% (12037/12037), 13.05 MiB | 2.98 MiB/s, done.
Resolving deltas: 100% (6965/6965), done.

 

2.启用主题

打开站点根目录下的_config.yml文件, 找到 theme 字段,并将其值更改为 next。

theme: next

修改语言:

language: zh-CN

注意:冒号后面必须有一个空格。

3.修改配置: 

下面提到的站点配置文件指的是根目录下的_config.yml,主题配置文件指的是 themes\next\_config.yml 文件

1.修改主题配置文件的scheme模式:采用最后一种Gemini

scheme: Gemini

2.修改标签及其分类界面

修改主题配置文件

menu:
  home: /|| home
  #about: /about/ || user
  tags: /tags/|| tags
  categories: /categories/|| th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

放开对应的注释,由于我在访问的时候URL老是报错。所以我去掉 || 之前的空格。

进入命令行输入:

hexo n page tags
hexo n page categories

修改source/categories/index.md,在 date 下一行输入:

type: "categories"

修改source/tags/index.md,在 date 下一行输入:

type: "tags"

3.隐藏网页底部 powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.swig, 找到:

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __(‘footer.powered‘, ‘<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>‘) }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __(‘footer.theme‘) }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

注掉或者删掉,当然也可以换成自己想要的内容。

4.文章添加阴影

 打开 /themes/next/source/css/_custom/custom.styl ,添加:

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

5.浏览页面显示当前浏览进度

打开主题配置文件,搜索关键字 scrollpercent,把 false 改为 true。

6.Local Search本地搜索

在站点的根目录下执行以下命令:

npm install hexo-generator-searchdb --save

编辑站点配置文件,新增以下内容加到最后:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件,启用本地搜索功能:

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

7.设置个人头像

打开 主题配置文件,找到 Sidebar Avatar 字段:

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /img/photo.jpg

图片可以放在站点根目录的source/img/目录,也可以放在主题的sources/images/目录下,我选择放在站点的source/img/目录下。

8.网站底部字数统计

站点根目录下执行:

npm install hexo-wordcount --save

然后在 /themes/next/layout/_partials/footer.swig 文件尾部加上:

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

 9. 设置默认显示文章摘要,并且摘要文字为150个字

修改站点配置,找到auto_excerpt:

auto_excerpt:
  enable: true
  length: 150

还有更多其他的配置,用到的时候在去查API即可。

3.结合gitpage创建博客

1.到git创建一个仓库,名字为: username.github.io

例如我的用户名为: qiao-zhi, 我创建的仓库名为: qiao-zhi.github.io

基于github与hexo搭建个人博客

2.修改上面站点配置文件的deploy:

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

3.安装hexo-deployer-git:(到站点的根目录执行)

npm install hexo-deployer-git --save

4.执行 生成静态文件并且发布:

hexo generate -deploy

可以简写为

hexo generate -d

执行上面命令由于我们没有配SSH提交git代码,所以需要我们输入用户名和密码进行git提交。如果想不输入用户名密码可以配置SSH提交代码,可以参考我之前的git学习文章。

上面命令相当于是执行hexo generate 生成静态文件之后将public目录的文件上传至仓库。也就是传到 https://github.com/qiao-zhi/qiao-zhi.github.io.git 仓库的是public目录的文件,如下:

本地public如下:

基于github与hexo搭建个人博客

远程仓库master分支代码如下:

基于github与hexo搭建个人博客

 5.接下来查看git上项目的settings,向下拖到GitHub Pages:

基于github与hexo搭建个人博客

 6.访问测试:

https://qiao-zhi.github.io/

7. 代码也推到该仓库的其他分支:

因为master分支是存放Hexo博客生成的页面,所以只能创建一个分支来保存博客的源代码在你的Github上。比如,创建一个分支叫dev:

(0)创建dev分支并且默认分支修改为dev

基于github与hexo搭建个人博客

基于github与hexo搭建个人博客

(1)到themes目录下面删掉自带的主题

(2)到next目录下面删掉 .git 目录

(3)到站点根目录执行下面操作:(本地初始化为git目录,并且切出dev分支,强行将代码推送到远程的dev分支)

git init
git remote add origin https://github.com/qiao-zhi/qiao-zhi.github.io.git
git checkout -b dev
git add .
git commit -m "first code commit"
git push -f origin dev

(4)以后的代码可以直接推送到dev分支,且dev分支不包括public目录,站点根目录的 .gitignore 内容如下:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

最终网站效果:  https://qiao-zhi.github.io/

最终代码:https://github.com/qiao-zhi/qiao-zhi.github.io/tree/dev

相关推荐

JingLisen / 0评论 2020-01-06