Github+Hexo搭建个人博客及自定义

简单地搭建博客的记录，以及一些个性化操作。

Hexo Get Start

安装和初始化

命令行里执行:

npm install -g hexo```

1
2
3


2. 初始化博客(若不设置folder，默认在当前文件夹建立网站):  
   ```$ hexo init [folder]

会自动生成source,thems,_config.yml。

按照提示运行 $ npm install 。会观察到增加了node_modules目录。

The First article

我们来创建博客的第一篇文章:命令$ hexo new [post|page|draft] "hello-world"会在[folder]\source\_posts下自动创建一个”hello-world.md”文件。
发表草稿：$ hexo publish <filename> (草稿会存在source\_drafts文件夹中，该命令会将草稿移入source\_posts中。)
生成静态网页: $hexo generate。生成的静态文件位于public文件夹下。
启动本地server: $ hexo server。启动后，访问 http://localhost:4000/(4000为默认端口)可预览博客效果。
停止server: Ctrl+C (注 :hexo3中server模块独立出来了，要单独安装$ npm install hexo-server --save)

注：若发现站点未发生改变，则可能需 $ hexo clean 清除生成的静态文件等，再重新generate 。

部署到GitHub

注: 需要先在github上创建个人的github page。

安装hexo-deployer插件: $ npm install hexo-deployer-git

修改站点配置文件_config.yml：找到deploy,将其属性修改为：

git

1
2
3

repository: https://github.com/[username]/[username].github.io.git
branch: master```  
*注: [username]为自己在github的用户名。*

运行 hexo deploy

其他

参考：Hexo文档

配置主题

我使用的是NexT主题

主题配置

主题安装后，会出现在themes目录下。主题配置文件为_config.yml。可参考注释和官网进行配置。

第三方服务集成

我集成了多说，google-analytics，不蒜子，sitemap。配置第三方库方法可以参考这篇博客。

自定义

目录结构与渲染原理

站点的scaffolds目录下存着几种layout的模板，默认的layout有page,post,draft,可自定义。
站点的public下是generate后生成的页面，也可自己放上一些需要用的静态资源。
主题的layout下是以swig文件定义的布局及一些布局相关的逻辑。
主题的source下放有CSS，JS，font等控制显示和行为的代码。

我们通过修改站点和主题的配置文件是在已有的样式和组件上进行选择。如果我们要自定义且覆盖其默认样式，可以修改css或js源码，但为了不破坏、易于管理等，最好不要直接修改源码，我们可以在\themes\next\source\js\src中定义自己的js文件，在layout的_layout.swig里引用。在\themes\next\source\css\_custom里定义样式表(支持stylus语法，也可用原生CSS)。从main.styl里可看到NexT主题是默认引用custom.styl的。

当想要修改某部分样式时，可以在浏览器中查看元素，然后在自定义文件中修改。

What I have done

这里我简单记录下该博客在样式上做的改变，也可给大家一个参考

背景

设置了昼/夜两套背景样式。这个单纯因为自己喜欢昼与夜，日与月这样的概念，又爱折腾视觉效果。:-)
侧边栏

觉得之前的样式不够简约，白黑搭配有些违和，于是修改了一下。
主页

我不太喜欢主页直接展示文章的形式，所以进行了修改。

（未完待续…）

好啦

这样，就搞定了自己喜欢的样式，拥有了闪耀着自己的小趣味的Blog。接下来就是好好记录，脚踏实地的阶段啦，毕竟皮表再华丽也只是皮表，灵魂还是在于内容呀。