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





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

——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可以有三个参数postpagedraft, 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写你的草稿文件的名字,layoutpost

模版(Scaffold)

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

$ hexo new photo "My Gallery"

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

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

布局(Layout)

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

布局路径
postsource/_posts
pagesource
draftsource/_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]] %}

在文章中插入链接,并自动给外部链接添加 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支持的语法还有很多,如
jsFiddleGistiframeYoutubeVimeo等等,有需要的建议自行查阅官方文档

服务器

安装与使用

要使用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

NexT

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

  1. 下载主题

cdyourhexosite 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 %}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值