hexo

1. Hexo

优势: 部署方便, 第三方主体非常漂亮, 可以在git上直接运行生产网页(免费)

官方文档

2. 安装

首先需要本地安装npm , git(此处略过)
安装hexo

1 2 3 4 5 6 7 8 9 10

mkdir hexo cd hexo npm install hexo-cli -g hexo init blog cd blog npm install -- 启动 hexo server -----启动成功控制台会打印以下内容---- INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

将项目提交到git , 依次点击服务 -> gitee pages -> 选择分支 -> 部署

操作完成后就点击网站地址就可以看到我们的项目了

---

3. 修改配置 blog/_config.yml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

-- 一下为修改项 未修改的没有展示出来,请勿删除 -- 博客基础信息 title: blog subtitle: yuyu description: 个人博客 keywords: author: yuyu language: zh-Hans timezone: Asia/Shanghai # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: https://reverselight.gitee.io/blog/ root: /blog -- 此项为将主题设置Wie下面要讲到的next主题 theme: hexo-theme-next-master

---

4. 配置next主题

git链接
将下载下来的文件复制到 blog/themes/
修改 themes/hexo-theme-next-master/_config.yml
打开themes/next下的_config.yml文件

4.1. 是否覆盖外部的全局设置

如果你要在主题里面设置建议这里设为true.

1 2 3

# Set to true, if you want to fully override the default configuration. # Useful if you don't want to inherit the theme _config.yml configurations. override: true

4.2. 网页关键字和图标的设置

1 2 3 4 5 6 7 8 9 10

favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml # Set default keywords (Use a comma to separate) keywords: "java, mysql,优快云,git,gitee"

4.3. 整个版面样式的设置

1 2 3 4 5

# Schemes # scheme: Muse # scheme: Mist # scheme: Pisces scheme: Gemini

4.4. 社交平台

1 2 3 4 5 6 7 8

menu: home: / || home tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar about: /about/ || user sitemap: /sitemap.xml || sitemap

4.5. 设置链接

1 2 3 4 5 6 7 8 9 10 11 12

social: GitHub: https://gitee.com/reverseLight || github E-Mail: yuy9501@126.com.com || envelope #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype blog: http://www.chenguanting.top || stack-overflow

4.6. 字数统计

1 2 3 4 5 6 7 8

# Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true totalcount: true separated_meta: true

4.7. 设置打赏

1 2 3 4 5

#Reward reward_comment: 您的支持是我创作源源不断的动力 wechatpay: /images/reward_weixin.png alipay: /images/reward_alipay.jpg #bitcoin: /images/logo_width.png

4.8.

4.9. gitalk评论插件

1 2 3 4 5 6 7 8 9

# Gitalk gitalk: enable: true #用来做启用判断可以不用 clientID: 'xxxxxxxx' #上面生成的往这里怼 clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' #同上 repo: xxxxx.github.com #仓库名称 owner: xxxxxx #github用户名 admin: xxxxxxx distractionFreeMode: true

---

5. 其他设置

5.1. next主题设置首页不显示全文(只显示预览)

修改 themes/hexo-theme-next-master/_config.yml

1 2 3

auto_excerpt: enable: true length: 150

5.2. 本地部署页面正常, git部署页面排版错乱

修改 themes/hexo-theme-next-master/_config.yml

1 2	url: https://reverselight.gitee.io/blog/ root: /blog

5.3. next主题设置文章目录

在此文件追加 themes/hexo-theme-next-master/source/css/_custom/custom.styl

1 2 3 4 5 6

//文章目录默认展开 .post-toc .nav .nav-child { display: block; } // 文章目录字体大小调整 .post-toc ol { font-size : 13px; }

修改 themes/hexo-theme-next-master/_config.yml

1 2 3 4 5 6 7 8

toc: enable: true # Automatically add list number to toc. number: true # If true, all words will placed on next lines if header width longer then sidebar width. wrap: true