自己动手搭建个人博客到优化

最新推荐文章于 2022-03-08 09:49:28 发布

SmartNi

最新推荐文章于 2022-03-08 09:49:28 发布

阅读量739

点赞数

分类专栏：博客文章标签：博客

本文链接：https://blog.csdn.net/nijun914/article/details/75808839

版权

博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天，是你未来所有剩余的日子中，最早的一天

——stormzhang

背景

个人博客地址：http://nijun.me

我为什么要写这篇文章？是因为大学三年了，感觉学了这么多知识，但是并没有真正地去消化和总结过，最近又看到了stormzhang大神写的这篇我为什么坚持写博客？。我真的感触很深，以前花了很多时间学的东西，不久之后便会印象模糊，想要回忆的时候，又不能快速找到。所以我决定从今天开始写博客，总结和梳理自己的知识。

stormzhang在他的文章里推荐了hexo，基于Node框架，可以和Github Pages结合起来搭建个人博客。而且主题样式非常多，可以自己选择搭配的东西很多。当我第一次把博客跑起来的时候，真的惊呆了，没想到个人博客也可以这么轻松的搭建。我用了五一这个假期，自己动手搭建了现在您正看到的这个博客，虽然现在很粗糙，但是我会不断的学习和优化它的。

Hexo

什么是Hexo

Hexo是一个快速，简单和强大的博客框架。可以使用Markdown进行写作，Hexo会在几秒钟内生成具有美丽主题的静态文件。

安装要求

这里具体的操作步骤可以到hexo官网。

如果已经装好了这些，那么我们现在就开始吧！

第一步

一旦安装了所有要求，可以用npm安装Hexo。

$ npm install hexo-cli -g  //在本地安装hexo的环境

第二步

首先选择一个目录作为hexo博客的根目录，使用git bash cd到这个目录，然后输入

$ hexo init <folder>   //推荐 ，这里的folder参数如果指定，便会在终端当前的资料夹建立一个名为 folder 的新资料夹；
$ hexo init  //直接使用当前目录初始化

完成后

   $ cd folder
   $ npm install  //在当前目录下安装hexo核心文件
   $ npm install hexo --no-optional --save

这样就安装完成了。这时候可以看到floder文件夹下具有这些子目录

    .
    ├── _config.yml   站点配置文件
    ├── package.json
    ├── scaffolds    存放模板的地方
    ├── source       原文件夹，存放网站内容
    |   ├── _drafts  存放临时草稿文件的地方
    |   └── _posts   已经发布的文章
    └── themes       主题文件夹

source中带有前缀_(下划线)的文件夹，在generate的时候会渲染到public目录中，其他的文件夹和文件仅仅被简单地复制到public中。

在floder目录下，有一个_config.yml，这个文件是整个网站的核心配置文件，由于后面主题文件夹中也有一个同名的配置文件，为了区分，网站的核心配置文件就叫做站点配置文件，主题中的叫做主题配置文件。

打开站点配置文件,可以看到Site标签，这是我的配置。

    # Site
    title: SimpleLifee  #网站标题
    subtitle: code, mylife   #网站副标题
    description: start from zero     #网站描述
    author: Nimon        #你的名字
    language: zh-Hans    #语言，
    timezone: Asia/Shanghai  #时区

还有Deployment标签，与Github Pages进行关联

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

其中type必须填git，repo填写你在git上创建的库的ssh地址，或者https地址。注意如果是https的那么以后每次deploy的时候都要求你输入用户名和密码,如果改成ssh并且你没有给你的id_rsa设置密码（空密码也一样）的话，就不用每次都输入密码了。

$ ssh-keygen -p -f /root/.ssh/id_dsa -N ''

如果你之前设置了密码，那么使用这条命令就可以更改你的私钥的密码了。参考superuser

命令

写作

$ hexo new [layout] <title>

创建一个新文章，layout可以有三个参数post、page、draft, hexo 会在 Scaffold 文件夹下寻找你写的 layout.md 文件模板来建立文件。如果 title 包含空格，请用引号括起来。

文件名称

在站点配置文件中Writing 标签下添加

new_post_name: :year-:month-:day-:title.md

其中 :month 和 :i_month 的区别在于前者有前导零（比如 04 ）

草稿

如果创建新文章的时候，指定了 draft 参数，那么就是保存到 source/_drafts 文件夹中，可以使用下面的语句，将草稿移动到 source/_posts文件中。

$ hexo publish [layout] <filename>

发布草稿变成正式文章。一般filename写你的草稿文件的名字，layout写post

模版（Scaffold）

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

$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章

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

布局（Layout）

Hexo 有三种默认布局：post、page、draft，它们分别对应不同的路径，自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
post	source/_posts
page	source
draft	source/_drafts

不要处理我的文章
可以在Front-Matter 中的layout: 设为 false。

Front-matter

Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，例如

title: Hello World
date: 2017/5/1 20:46:25
---

也可以使用JSON 格式，只需要把 — 换成 ;;;

"title": "Hello World",
"date": "2017/5/1 20:46:25"
;;;

Front-matter的参数列表

参数	描述	默认值
`layout`	布局
`title`	标题
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`description`	文章的描述
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址

分类和标签

tags:
  - List
  - Dictionary
  - ArraryList
  - hashtable
  - Stack
  - Queue

或者

 tags:
 [Python, Javascript, Hexo]

引用块（Block Quote）

模板如下

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

例如

{% blockquote stormzhang %}
今天，是你未来所有剩余的日子中，最早的一天
{% endblockquote %}

{% blockquote stormzhang %}
今天，是你未来所有剩余的日子中，最早的一天
{% endblockquote %}

代码块（Code Block）

模板如下

{% codeblock [title] [lang:language] [url] [link text]%}
code snippet
{% endcodeblock %}

例如：

{% codeblock  main.java lang:java  http://www.runoob.com/java/java-tutorial.html Java%}
public static void main(String []args){
}
{% endcodeblock  %}

{% codeblock main.java lang:java http://www.runoob.com/java/java-tutorial.html Java%}
public static void main(String []args){
}
{% endcodeblock %}

醒目引文（Pull Quote）

{% pullquote [class] %}
something important
{% endpullquote %}

如下

{% pullquote [class] %}
something important
{% endpullquote %}

图片（Image）

有两种方式，一种是markdown格式的

![](/images/avatar.jpg)

另一种是hexo支持的格式

{% img [class names] /path/to/image [width] [height][title text [alt text]] %}

链接（Link）

在文章中插入链接，并自动给外部链接添加 target=”_blank” 属性。

{% link text url [external] [title] %}

{% link 谷歌 http://www.google.com google %}

如{% link 谷歌 http://www.google.com google %}

外部引用（Include Code）

可以引入其他文件中的代码，例如下面语句

{% include_code [title][lang:language] path/to/file %}

hexo支持的语法还有很多，如
jsFiddle、Gist、iframe、Youtube、Vimeo等等，有需要的建议自行查阅官方文档

服务器

安装与使用

要使用hexo的服务器，首先要安装

{% blockquote %}
npm install hexo-server –save
{% endblockquote %}

安装完成后，默认在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。

$ hexo server -p 5000 //启动服务器，可以简写 hexo s

参数 -p 覆盖默认端口，参数 -w 查看文件改动
看到下面的信息，说明已经成功，可以查看你的博客了。

静态模式

在静态模式下，服务器只处理 public 文件夹内的文件，而不会处理文件变动，一般性用于你正在写博客的情况下。

$ hexo server -s

生成文件(Generating)

$ hexo generate

生成静态文件，参数 -d 生成完成后部署，参数 -w 查看文件改动，下面两种写法都一样

$ hexo g -d
$ hexo d -g

监视文件变动

$ hexo generate --watch

Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1 checksum，只有变动的文件才会写入。

部署（Deployment）

$ hexo deploy

部署你的网站，在使用之前，需要在站点配置文件 进行配置。可以有多个deployer

deploy:
- type: git
  repo:
- type: heroku    
  repo:

缩进

YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

Git

部署提示找不到Git , 直接使用这个命令从 hexo-deployer-git 上安装git的部署插件

$ npm install hexo-deployer-git --save

修改配置。
{% codeblock lang:yaml%}
deploy:
type: git
repo:
branch: [branch]
message: [message]
{% endcodeblock %}

参数	描述
`repo`	库（Repository）地址
`branch`	分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。最好填ssh，这样就每次deploy的时候都要输入密码了。
`message`	自定义提交信息 (默认为 `Site updated: { { now('YYYY-MM-DD HH:mm:ss') }}`)

其他

其他部署方案，可以参见官方文档

$ hexo clean

清除缓存文件（db.json）和生成的文件（public）

$ hexo list <type>

type 可以是page, post,route, tag, category

$ hexo version

显示版本信息

$ hexo --config custom.yml
$ hexo --config custom.yml，custom2.json

使用自定义配置文件（而不是_config.yml），还可以接受将文件合并为一个的JSON或YAML配置文件的逗号分隔列表（无空格）

自动更新文件

$ hexo g     //也可以这样写hexo generate

部署到git

$ hexo d

一般可以这样简写，就是说在部署到git之前，先进行更新

$ hexo d -g

可以查看hexo的版本

hexo -v

这时候万一遇到这个错误

ERROR Deployer not found: git

试试

$ npm install hexo-deployer-git --save
$ npm install hexo --save

如果是下面这个问题：

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

那就

npm install hexo --no-optional

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

下载主题

$cd your-hexo-site$ git clone https://github.com/iissnan/hexo-theme-next themes/next




2. 启用主题
   与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 `站点配置文件`， 找到` theme `字段，并将其值更改为` next`。

theme: next


   到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 `$ hexo clean` 来清除 Hexo 的缓存。





### 一些好用的插件 ###

{% blockquote %}
hexo可视化后台管理，很方便 - [hexo-hey](https://github.com/nihgwu/hexo-hey)  
在 hexo 中无痛使用本地图片 - [hexo-asset-image](https://github.com/CodeFalling/hexo-asset-image)
备份整个博客包括主题 - [hexo-git-backup](https://github.com/coneycode/hexo-git-backup)


{% endblockquote %}

### 参考 ###

{% blockquote %}
网易云音乐 - [Hexo中播放网易云音乐的实践](http://weqeo.com/2016/10/11/Hexo中播放网易云音乐的实践)  
网易云音乐 - [GitHub Ribbons](https://github.com/blog/273-github-ribbons)  
字数统计WordCount 、阅读时长预计Min2Read、总字数统计TotalCount - [hexo-wordcount](https://github.com/willin/hexo-wordcount)  

{% endblockquote %}