# hexo搭建跟我一样的博客 # 这是什么 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown解析文章,在几秒内,即可利用漂亮的主题生成静态网页。 中文的文档 https://hexo.io/zh-cn/docs/index.html ## 一句话总结 > 用上了hexo,走上装逼的巅峰。 # 为什么用hexo 文章编写简单,数据全在本地,你可以通过各种同步工具(百度云,360云盘),保证你的文章不丢失,这比存在数据库(mysql)多好啦,因为,你才能写几篇文章啊,哈哈,顶多写几篇装装逼,简单,数据不易丢失,就是我的选择。 ## 一句话总结 > 1. 易用性,编写文章方便,快捷,易修改。 2. 数据安全性,随时同步到各种云盘。 3. 装逼性,各种看起来高端大气的主题,极大的提升逼格,同时有能力也可以自己设计一套具有个性的主题。 # 安装hexo 安装好下面的软件,一般程序员基本都装好了,不多解释。 * [Node.js](https://nodejs.org/en/) * [Git](https://git-scm.com) ## 安装git ### 这是什么 GitHub——全球最大同性交友网站,不多解释了。 git的使用方法 http://git.oschina.net/progit/ ## 安装nodejs 打开官网,然后直接下载呗,打开以后,下一步下一步下一步,不多解释。 https://nodejs.org/en/ 当然是下载lts版本了. v4.4.3 LTS 安装好了以后,命令行里面输入 `node -v` 出现你安装的版本证明安装成功. ## 开始安装hexo 上述软件安装完成后,就可以使用 `npm` 安装 `Hexo`。 `npm install -g hexo-cli` # 快速学会使用hexo ## 创建目录 安装好了以后,找一个文件夹存放你的博客吧。 命令行工具里面 进入到这个目录. `cd F:\chensuilongblog\` 记得自己创建下文件夹哦. ## 初始化 执行下面的命令 `hexo init` `npm install` 新建完成后,指定文件夹的目录如下: ``` ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes ``` ### _config.yml 网站的 配置 信息,您可以在此配置大部分的参数。 ### source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。 我的文章就写在 `source/_posts/` ### themes 主题 文件夹。Hexo 会根据主题来生成静态页面。 这里是用来存放高大上的博客主题. # 配置我的博客 配置 您可以在 _config.yml 中修改大部份的配置。 网站 | 参数 | 描述 | - | - | | title | 网站标题 | subtitle | 网站副标题 | description | 网站描述 | author | 您的名字 | language | 网站使用的语言,填 中文 | timezone | 网站时区。 填 CN 暂时了解,这么多先,不然估计你都不想继续往下看了。 接下来,我会告诉你怎么把博客运行起来。 # 启动我的博客 命令行输入 `hexo s` 然后没有错误的话,就会出现 提示 ``` INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. ``` 打开 `http://localhost:4000/` 属于自己的博客是不是出来了啊。 # 编写文章 命令行输入 `hexo n 我的第一篇文章` 打开创建好的文件. `source/_posts/我的第一篇文章.md` 现在你可以用markdown的语法编写文章了. ## 学习markdown语法吧 我就不在这里多说了,稍微快速的一看一就学会了。 http://www.jianshu.com/p/1e402922ee32/ # 生成你的博客 命令行输入 `hexo g` 那么在 `/public/`,里面就生成好了静态的html文件了。 通过上传,这里面的文件服务器,就可以访问到你的博客了。 # 免费的展现博客的解决方案 还记得前面说的 github 吗,全球最大的同性交友网站 ## 使用 github pages 官网上就有介绍 https://pages.github.com/ 看着来就能解决了.没有什么大文件.我介绍下怎么绑定域名 ### 绑定域名 添加CNAME文件 建立文件 `source/CNAME` 写入内容 `blog.c2567.com` 输入命令 `hexo g` 这样子public里面也有这个文件啦,上传到 github上,就可以绑定上域名咯. #### 添加域名解析记录 CNAME 域名为`blog.c2567.com` 值为 `wl496928838.github.io` 不懂请看阿里云的文档 域名CNAME解析设置方法 https://help.aliyun.com/knowledge_detail/6555865.html ## 一句话总结 通过hexo,生成好了html文件,只需要传到任意能访问html文件的地方就行了。 还有另外一个解决方案,速度还比较快的。一会介绍。 # 使用七牛云存储 ## 为什么用七牛 因为他提供了一个月提供了5G 免费的流量啊,一个博客压根就用不了这么多啊。 ## 注册一个七牛账号吧 https://portal.qiniu.com/signup?code=3l7yvtiq6dd8y ## 创建一个空间 ## 把你的文件都上传上去。 请移步到七牛的文档中查看如何玩耍吧。 ## qrsync 命令行上传同步工具 http://developer.qiniu.com/code/v6/tool/qrsync.html ### 基本玩法。 * 配置好conf.json * 执行命令 ### 上传 `qrsync.exe ./conf.json` ### 完成. 这个挺简单的,不多说了。几乎没难度。 # 提高博客的逼格 前面就是博客的基本搭建,以及编写文章了。接下来,你将学会如何提升逼格。 # 安装主题 这个主题是我博客目前用的.当然我自己修改过了. https://github.com/litten/hexo-theme-yilia ## 安装我这博客的主题 `git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia` ## 配置使用这个主题 修改hexo根目录下的 `_config.yml : theme: yilia` ## 配置这个主题下的配置 主题配置文件在主目录下的_config.yml: 这里是指这个文件 `\themes\yilia\_config.yml` ``` # Header menu: 主页: / 所有文章: /archives # 随笔: /tags/随笔 # SubNav subnav: github: "#" weibo: "#" rss: "#" zhihu: "#" #douban: "#" #mail: "#" #facebook: "#" #google: "#" #twitter: "#" #linkedin: "#" rss: /atom.xml # Content excerpt_link: more fancybox: true mathjax: true # Miscellaneous google_analytics: '' favicon: /favicon.png #你的头像url avatar: "" #是否开启分享 share: true #是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key #若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论 duoshuo: true #是否开启云标签 tagcloud: true #是否开启友情链接 #不开启—— #friends: false #开启—— friends: 奥巴马的博客: http://localhost:4000/ 卡卡的美丽传说: http://localhost:4000/ 本泽马的博客: http://localhost:4000/ 吉格斯的博客: http://localhost:4000/ 习大大大不同: http://localhost:4000/ 托蒂的博客: http://localhost:4000/ #是否开启“关于我”。 #不开启—— #aboutme: false #开启—— aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货… ``` ## 看看效果吧,看看逼格提升了没有 命令行中执行 `hexo s` 看看效果吧~~ ## 加入多说 账号自己注册,站点自己创建,应该不困难。 http://duoshuo.com/ 修改配置 `\themes\yilia\_config.yml` 找到这个值 `duoshuo: true` 修改为 `duoshuo: chensuilong` 因为我在多说里面,创建的域名是这个所以就写这个。 你们创建的时候就知道了。就你自己填创建的域名 ### 修改多说的样式 这里我把我多说上的样式发出来。 设置方法,你可以直接引入这个css文件,也可以通过多说的后台设置。 #### 多说后台的设置方法 * 进入多说后台 * 找到`设置` * 找到`自定义CSS` * 把下面的内容复制进去。 这样子,就可以做到跟我博客一样的评论样式啦 ### duoshuo.css ``` #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none} #ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#698376 !important;} #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba} #ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;} #ds-thread {padding-left:30px;} #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible} #ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;} #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;} #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;} #ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;} #ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important} #ds-thread .ds-avatar a:hover {border-color:#de5a4e} #ds-thread .ds-avatar > img {margin:2px 0 0 2px} #ds-thread #ds-reset .ds-replybox {box-shadow:none;} #ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar, #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; } #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;} #ds-reset .ds-replybox a.ds-avatar, #ds-reset .ds-replybox .ds-avatar img { padding:0;width:38px !important;height:38px !important; border-radius:5px; } #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22); -webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out; } .ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);} #ds-thread #ds-reset .ds-comment-body {background: #FFFFFF;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;} #ds-thread #ds-reset .ds-comment-body p{color:#787968} #ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;} #ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;} #ds-thread #ds-reset #ds-hot-posts {border:0} #ds-reset #ds-hot-posts .ds-gradient-bg {background:none;} #ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;} #ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;} #ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;} #ds-reset #ds-bubble .ds-user-name{padding-left:13px;} #ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important} #ds-reset #ds-ctx {margin-right:-15px} #ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;} #ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968} #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold} #ds-thread #ds-reset .ds-powered-by{ display:none; } /*隐藏多说底部版权*/ #ds-thread {padding:32px;} #ds-thread #ds-reset .ds-textarea-wrapper textarea { background:#FFF center no-repeat; } ``` # 增加文章后面的尾注. 我的文章最后,都有一个版权声明,看得起来逼格是不是很高。 ## 注意 如果,修改了没有生效的话执行下,`hexo clean`,再执行`hexo g`。这样子就有效果了. ## 似乎需要安装这个插件 https://github.com/JamesPan/hexo-filter-indicate-the-source (或许可以试试不安装,其实我用的方法是自定义脚本的,可以跟着后面做不安装先。) `npm install hexo-filter-indicate-the-source --save` 这个插件的作用 就是 添加尾注。但是我们做的需要高级一点。 ## 创建一个自定义脚本 建立文件 `F:/chensuilongblog/script/1.js` 文件夹是自己新建的,文件也是自己新建的 写入内容 ``` console.log('处理尾部版权信息的'); var fs = require('fs'); hexo.extend.filter.register('before_post_render', function(data){ // console.log(data); var file_content = fs.readFileSync('./source/tail.md'); data.content += file_content; var permalink = '\n本文永久链接:' + data.permalink; data.content += permalink; return data; }); ``` ## 新建版权信息文件 建立文件 `F:/chensuilongblog/source/tail.md` 写入内容,这里支持markdown语法的哦。这是我博客的内容,大家看着来改吧。 ``` *** # 版权声明 ![许可](https://box.kancloud.cn/c21040d787e2d6926d129dc97365660d_513x78.png) The [chensuilong blog](http://blog.c2567.com) by [chensuilong](http://blog.c2567.com) is licensed under a [Creative Commons BY-NC-ND 4.0 International License](http://creativecommons.org/licenses/by-nc-nd/4.0/). 由 [陈穗龙](http://blog.c2567.com) 创作并维护 [陈穗龙的博客](http://blog.c2567.com) 采用 [创作共用保留署名-非商业-禁止演绎4.0国际许可证](http://creativecommons.org/licenses/by-nc-nd/4.0/)。 本文首发于陈穗龙的博客( http://blog.c2567.com ),版权所有,侵权必究。 我的联系方式,QQ:496928838 # 打赏我,支持我~ 如果觉得我的文章对您有帮助,请随意打赏,您的支持将鼓励我继续创作! ![打赏我](https://box.kancloud.cn/87e76f1b5f3af8273aa8d06f00e1097a_430x430.png) ``` ## 剖开文章后加版权的本质,最简单的hook原理 ``` hexo.extend.filter.register('before_post_render', function(data){ console.log(data); return data; }); ``` 这个函数可以获取到文章处理时的内容,可以做到预处理.上面的函数就是根据这个扩展功能的. ## 注意 完成了,上面的文件建立,执行 `hexo s`,就可以看到效果了。 # 优化hexo生成出来的文件 虽然是英文的,但是大家应该看得懂哈 https://github.com/unhealthy/hexo-all-minifier 这是一个hexo的插件。 ## 安装优化文件插件 `npm install hexo-all-minifier --save` ## 配置下 打开配置文件 `_config.yml` 加入下面的配置 ``` html_minifier: enable: true exclude: css_minifier: enable: true exclude: - '*.min.css' js_minifier: enable: true mangle: true output: compress: exclude: - '*.min.js' ``` 完事了,这样子就能够对 html css js 进行压缩了,其实他还支持图片压缩。