Posted Updated 12 minutes read (About 1737 words)

Hexo+Github建立个人博客

怎么使用hexo建立个人博客

所需环境

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

  • Git

安装

  1. 使用npm安装Hexo
1
$ npm install -g hexo-cli

安装完成后，可以输入hexo --version查看版本，确认是否安装

  1. 初始化Hexo

然后选择一个文件夹建立

1
$ hexo init <随便取一个名称>

或者建立一个文件夹cd <新文件夹>然后

1
hexo init

确定路径正确后，使用下面指令，安装所需的npm套件

1
$ npm install

完成后，进入文件夹可以看到下面的文件

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

如下图所示

_config.yml

  • 有关网站配置的档案，可修改各种配置设定。 例如：网站标题、网站的网址、使用主题名称等等
  • 详细内容可以参考官方文件

package.json

记录所有载入的应用程序资料，也就是专案中需要的所有模组。

scaffolds 模板

  • 当我们建立新文章时，Hexo 会根据 scaffolds 中的模板建立相对应的档案
  • 资料夹中有三种预设布局：post、page 和 draft，分别对应：要发布的文章、页面、草稿

themes 主题

  • 用来存放主题的资料夹
  • Hexo 会根据主题来解析 scouce 资料夹中的档案并产生静态页面。 预设主题为 landscape

source 资源

  • 用来存放原始档案的地方，例如 Markdown 档、图片、各种页面（分页、关于等）

  • 通常资料夹命名开头会加上底线 _，例如 _imgs

  • 以 _ 开头的档案、资料夹或隐藏档案会被忽略，除了 _posts 资料夹以外

  • Markdown 档和 HTML 档会被解析，并放到 public 资料夹，而其他档案则会被拷贝过去

source & public & .deploy_git 的差别

  • 执行 $ hexo generate 之后，会将 scorce 文件夹中的 Markdown 档和 HTML 档进行解析，再结合主题进行渲染，生成我们看到的静态网站
  • 执行 $ hexo deploy 之后，则会将 public 文件夹中的内容部署到 GitHub，并生成 .deploy_git 资料夹，因此内容与 public 几乎相同
  • 这三者的关系可想成：
1
source -> public -> .deploy_git

常用指令

接着介绍一些 Hexo 常会用到的相关指令语法，更多详细指令可参考官方文件。

new 新增文章

1
$ hexo new [layout] <title>
  • 如果没有设定 layout，则会使用 _config.yml 中的 default_layout 来设定
  • 如果标题有包含空格，需使用引号括住，例如" title"
  • 接着可直接到 /source/_posts/title.md 中编辑文章内容
  • 档案名称尽量以英文命名，避免出现乱码

若是对 Markdown 相关语法不熟悉，可参考这篇笔记：Markdown 格式介绍

clean 清除静态档案与快取

1
$ hexo clean

在每次储存修正后的档案之前，会建议先输入此指令，清除快取档案 （db.json）和已产生的静态档案（public）。

generate 产生静态档案

1
$ hexo generate

可简写成 hexo g，生成静态档案。

server 启动服务器

  • 在本地端启动 Hexo 服务器，预设路径为：http://localhost:4000/

  • 可在自己电脑上预览设定结果，按 Ctrl + C 即可关闭

    ！

    一种更简单的方法是hexo d -g，这也是我经常使用的

部署到Github

基本部署

在git bash输入ssh -T git@github.com，如果如下图所示，出现你的用户名，那就成功了。

然后，我们将hexo与Github关联起来，将Hexo上的文章部署到GitHub上，打开博客根目录下的_config.yml文件，修改最后一行的配置：（如下）

1
2
3
4
5
deploy:
  type: git
  repository: https://github.com/carrollpolo.github.io
  branch: master

repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

命令如下：

1
npm install hexo-deployer-git --save

之后使用命令将文章部署到Github

1
hexo d -g

然后，你就可以在相应的域名找到你的博客了

别忘记在GitHub page页面开启网站

打开Settings

打开Page

更换为master分支，点击save，过一段时间就会出现https://carrollpolo.github.io 域名了

Icarus 主题自定义

本文是基于icarus 5.x的版本（4.x的版本差别不大）

布局

文章页面两栏布局
主题默认是三栏布局，在阅读文章时显得有些拥挤。可以通过配置的方式把所有文章变为两栏布局，在config.post.yml把需要的widget显示在一边即可，可以参考官方文档。

但两栏整体宽度跟三栏不同，因此强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏宽度保持一致。
在博客根目录，添加以下2个文件
_config.page.yml
_config.post.yml
都添加以下内容即可

1
2
3
4
5
6
7
8
9
10
widgets:
	-
		type: recent_posts
 		position: left
 	-
 		type: categories
 		position: left
 	-
 		type: tags
 		position: left

diff:layout/layout.jsx如下

1
2
3
4
             <Head site={site} config={config} helper={helper} page={page} />
-            <body class={`is-${columnCount}-column`}>
+            <body class={`is-3-column`}>
                 <Navbar config={config} helper={helper} page={page} />

diff:layout/layout.jsx如下

1
2
3
4
                                 'is-12': columnCount === 1,
-                                'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+                                'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
                                 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3

diff:layout/common/widgets.jsx如下

1
2
3
4
5
6
7
8
 function getColumnSizeClass(columnCount) {
     switch (columnCount) {
         case 2:
-            return 'is-4-tablet is-4-desktop is-4-widescreen';
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
         case 3:
             return 'is-4-tablet is-4-desktop is-3-widescreen';
     }

并优化在不同屏幕小大下的宽度

diff:include/style/responsive.styl如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 +widescreen()
+    .is-3-column .container
+        max-width: $widescreen - $gap
+        width: $widescreen - $gap
+
     .is-1-column .container, .is-2-column .container
         max-width: $desktop - 2 * $gap
         width: $desktop - 2 * $gap

 +fullhd()
+    .is-3-column .container
+        max-width: $fullhd - 2 * $gap
+        width: $fullhd - 2 * $gap
+
     .is-2-column .container
         max-width: $widescreen - 2 * $gap
         width: $widescreen - 2 * $gap

目录粘性定位

原来只支持侧边栏整体粘性定位，为了阅读体验，只针对目录开启粘性定位，增加 column-left is-sticky 类，并调整样式

diff:source/js/main.js如下

1
2
3
     if ($toc.length > 0) {
+        $toc.addClass('column-left is-sticky');
         const $mask = $('<div>');

diff:include/style/widget.styl如下

1
2
3
+#toc
+    max-height: calc(100vh - 22px)
+    overflow-y: scroll

默认显示目录

新版支持直接配置，在_config.yml增加toc: true即可

Follow

Links

Categories

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

Recents

Archives

Tags

Github1
hexo使用文档1

Recents

Archives

Tags

Github1
hexo使用文档1
×