先上效果图
hexo-blog.gif
预览地址
点我点我
源码地址
https://github.com/artdong/hexo-blog
初始化 Hexo 模版引擎
一行代码快速搭建 Hexo.NexT 主题网站, come on, 一起来搭建自己的专属 blog 吧!
执行安装
进入本机 E 盘, 新建 blog 目录
第一步, 安装 hexo 环境
第二步, 安装下载 Hexo 模版, 即初始化 Hexo 模版
第三步, 进入 blog 文件夹, 执行安装依赖包
第四步, 启动 Hexo 服务
第五步, 在浏览器中打开 http://localhost:4000/
- NPM install hexo-cli -g
- hexo init blog
- cd blog
- NPM install
- hexo server
如果你没有安装 NPM, 请先执行下载安装 https://www.npmjs.com
安装成功执行
NPM -v
执行以上步骤之后在浏览器中键入 http://localhost:4000 即可看到一个初始状态的模版
修改测试端口号
如果需要修改端口 4000, 可以在 node-modules 文件夹下找到 hexo-server 模块中的 index.JS:
- /* global hexo */
- 'use strict';
- var assign = require('object-assign');
- hexo.config.server = assign({
- port: 5000,// 自行修改端口号
- log: false,
- ip: '0.0.0.0',
- compress: false,
- header: true
- }, hexo.config.server);
修改之后重新执行 hexo server 即可:
网站基础配置
显示或隐藏 Menu 菜单
在修改菜单之前你首先要弄清楚当前网站使用的皮肤是哪一个, 打开网站根目录 config_yml
- # Extensions
- ## Plugins: https://hexo.io/plugins/
- ## Themes: https://hexo.io/themes/
- theme: landscape
其中 landscape 就是你的皮肤框架
然后在网站根目录找到 themes/landscape 这里面就会有你菜单想的配置, 同时这里面也有一个 config_yml, 为了区分, 我们索性把站点下的配置文件称为站点配置 YAML, 皮肤框架下的配置文件称之为皮肤配置 YAML
OK, 打开皮肤配置 YAML 你会看到一些简短的配置, 其中第一条就是我们的菜单栏配置
- # Header
- menu:
- Home: /
- Archives: /archives
修改 Home 为主菜单, 修改 Archives 为 文章, 刷新浏览器 http://localhost:4000 即可看到效果
配置站点基础信息
打开站点配置 YAML
# Site
title: 标题
subtitle: 副标题
description: 描述
author: 作者
- language: zh-Hans
- timezone:
刷新浏览器 http://localhost:4000
设置 rss
在站点根目录执行安装 hexo-generator-feed
NPM install hexo-generator-feed --save-dev
在站点配置 YAML 中配置插件, 为了快速的找到配置项, 可以放到文件的结尾
- plugins: hexo-generator-feed
- feed:
- type: atom ##feed 类型 atom 或者 rss2
- path: atom.xml ##feed 路径
- limit: 20 ##feed 文章最小数量
点击 RSS 按钮, 会出现如下提示, 前提是你的浏览器有 rss 功能, 我本地使用的是 rss feed reader:
设置本地全局搜索
安装下载 hexo-generator-searchdb 模块
NPM install hexo-generator-searchdb --save-dev
站点配置 YAML 需要配置
search:
path: search.xml
- field: post
- format: html
- limit: 10000
皮肤配置 YAML 需要配置
- local_search:
- enable: true
当然你会发现并没有起作用, 这是因为当前 landscape 并不支持本地搜索, 后续将介绍 NexT 主题
使用命令生成静态文件
您可执行下列的其中一个命令, 让 Hexo 在生成完毕后自动部署网站, 两个命令的作用是相同的. 生成的文件在网站 public 目录下
- hexo generate --deploy
- hexo deploy --generate
可缩写为:
- hexo g -d
- hexo d -g
NexT 主题
下载安装 NexT 模版
在 GitHub 上下载 NexT 主题源码
把 NexT 主题源码的源码整个复制到你的站点目录下的 themes/next 目录下
修改站点配置 YAML 来更改主题
文章上面有讲到, 当前我们的主题使用的是 landscape 需要修改为 next
重新启动服务
刷新页面查看效果
学习并使用 NexT 主题配置
打开 next 的皮肤配置 YAML, 你会看到很多我们不明白的配置项, 根据注释可以读出其中配置的含义.
根据语言配置菜单栏语言
打开 next 皮肤配置 YAML 文件, 找到 languages 文件夹
点开 zh-Hans.YAML 其中的配置项就是已经翻译的文本, 网站会根据你站点配置 YAML 中的语言配置来去读取对应的语言文件
打开你 next 皮肤配置 YAML 你会看到菜单栏基础配置:
- menu:
- home: / || home
- #about: /about/ || user
- #tags: /tags/ || tags
- #categories: /categories/ || th
- archives: /archives/ || archive
- #schedule: /schedule/ || calendar
- #sitemap: /sitemap.xml || sitemap
- #commonweal: /404/ || heartbeat
发现 home 和 archives 菜单是开启的, 现在我们全部开启, 只需要去掉前面的 #, 刷新浏览器
- menu:
- home: / || home
- about: /about/ || user
- tags: /tags/ || tags
- categories: /categories/ || th
- archives: /archives/ || archive
- schedule: /schedule/ || calendar
- sitemap: /sitemap.xml || sitemap
- commonweal: /404/ || heartbeat
尝试修改站点配置 YAML 语言, 重启服务后刷新浏览器
language: zh-tw
配置站内搜索
安装下载 hexo-generator-searchdb 模块
NPM install hexo-generator-searchdb --save-dev
站点配置 YAML 需要配置
search:
path: search.xml
- field: post
- format: HTML
- limit: 10000
皮肤配置 YAML 需要配置
- local_search:
- enable: true
配置 rss
配置同见 2.3. 设置 rss
配置标签 (tags)
添加标签其实就是在你的 source 文件夹下新建一个 page 页面而已, 比如菜单上的 tags 和 about 或者 categories 都是一样的, 执行命令
hexo new page "tags"
会在 source 目录下生成一个对应的文件夹, 其中有 index.md 文件, 打开会看到一些基础配置:
- ---
- title: tags
- date: 2017-10-24 12:02:51
- ---
配置分类 (categories)
hexo new page "categories"
会在 source 目录下生成一个对应的文件夹, 其中有 index.md 文件, 打开会看到一些基础配置:
- ---
- title: categories
- date: 2017-10-24 12:02:51
- ---
配置站点基础信息
配置头像
在 next 皮肤配置 YAML 中可以配置远程地址, 也可以是本地资源地址
- # Sidebar Avatar
- # in theme directory(source/images): /images/avatar.gif
- # in site directory(source/uploads): /uploads/avatar.gif
avatar: 头像地址
配置站点描述
在站点配置 YAML 文件中, 找到 menu/description 就是当前站点的描述
description: 站点描述
配置第三方跳转链接
在 next 皮肤配置 YAML 中, 找到 social 配置项
- social:
- GitHub: https://github.com/yourname || GitHub
- E-Mail: mailto:yourname@163.com || envelope
QQ: http://wpa.qq.com/msgrd?v=3&uin=yourqq&site = 在线客服 & menu=yes || qq
- #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
- #Stack Overflow: https://stackoverflow.com/yourname || stack-overflow
- #YouTube: https://youtube.com/yourname || YouTube
- #Instagram: https://instagram.com/yourname || instagram
- #Skype: skype:yourname?call|chat || skype
友情链接
在 next 皮肤配置 YAML 中, 找到 links 配置项
- links_icon: link
- links_title: Links
- links_layout: inline
- links:
- friend1:
- friend2:
- friend3:
配置阅读次数 (使用第三方服务)
leancloud 作为装逼神器确实不错, 可以随意修改当前文章的阅读次数
- # Show number of visitors to each article.
- # You can visit https://leancloud.cn get AppID and AppKey.
- # 使用第三方服务 LeanCloud 查看文章阅读量
- leancloud_visitors:
- enable: true
- app_id:
- app_key:
配置评论 (使用第三方服务)
在 disqus 官网 http://www.disqus.com 注册一个帐号添加应用之后可获得一个名称, 作为你的 shortname
- # Disqus
- disqus:
- enable: true
shortname: 你的名称
count: true
配置站点统计 (使用第三方服务)
百度站点统计 http://tongji.baidu.com/web/welcome/login
- # Baidu Analytics ID
- # 注意: baidu_analytics 不是你的百度 id 或者 百度统计 id
- baidu_analytics: 327573ae29bff3e49a0152fd0be5e1c2
当前文章是否启用评论配置
如果不需要当前页面或这文章不启用评论, 则只需要添加以下配置:
- ---
- title: tags
- date: 2017-10-24 12:02:51
- comments: false
- ---
自定义配置
- {
- % if theme.passage_end_tag.enabled %
- }
- <div>
- <div style="text-align:center;color: #ccc;font-size:14px;">
- <br/>
- <ul class="post-copyright" style="margin: 2em 0 0; padding: 0.5em 1em;border-left: 3px solid #ff1700;background-color: #f9f9f9;list-style: none;">
- <li class="post-copyright-author">
- <strong > 本文作者:</strong>
- ArtDong
- </li>
- <li class="post-copyright-license">
- <strong > 版权声明: </strong>
- </li>
- </ul>
- </div>
- {
- % endif %
- }
- {% if not is_index %}
- {% include 'passage-end-tag.swig' %}
- {% endif %}
- # 文章末尾添加 "本文结束" 标记
- passage_end_tag:
- enabled: true
来源: http://www.jianshu.com/p/0f4310199856