什么是Hexo?
Hexo是一个轻量级的Node.js博客框架,由一位台湾的在校大学生开发完成!
Hexo的配置文件_config.yml分为两种,一种是站点配置文件,也就是站点根目录下的_config.yml配置文件,另一个是主题配置文件,位于theme文件夹中对应主题的文件夹下的_config.yml。
在后续的网站配置中需要多次使用站点配置文件和主题配置文件,需要注意辨析。
另外,需要注意的是本文部署hexo的服务器是腾讯云服务器,Ubuntu16.04系统。
在nodejs官网上下载最新的Windows安装包,直接安装即可。
在nodejs官网上找到需要下载的源码(不是二进制文件),解压之后进入目录,执行:
$ ./configure $ make && make install注意如果需要sudo的话, make和make install 要分开,因为sudo不能传递到&&后面的指令。
查看node和npm版本
node -v npm -v因为防火墙的缘故,很多境外网站被墙了,所以使用node.js的原生工具npm是无法正常安装模块的,建议使用淘宝前端组的国内镜像,使用他们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org使用方法如下:
从registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.
$ cnpm install [name]安转了node之后,就可以使用以下命令来安装hexo:
$ npm install -g hexo-cli安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder> $ cd <folder> $ npm install新建完成后,指定文件夹的目录如下:
├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes_config.yml 网站的 配置 信息
您可以在此配置网站大部分的参数。
package.json 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
package.json { "name": "hexo-site", "version": "0.0.0", "private": true, "hexo": { "version": "" }, "dependencies": { "hexo": "^3.0.0", "hexo-generator-archive": "^0.1.0", "hexo-generator-category": "^0.1.0", "hexo-generator-index": "^0.1.0", "hexo-generator-tag": "^0.1.0", "hexo-renderer-ejs": "^0.1.0", "hexo-renderer-stylus": "^0.2.0", "hexo-renderer-marked": "^0.2.4", "hexo-server": "^0.1.2" } }scaffolds模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source资源文件夹是存放用户资源的地方。
除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes主题 文件夹。
Hexo 会根据主题来生成静态页面。
hexo-admin-github
修改站点配置文件,就是网站根目录下的 _config.yml文件:
admin: username: myfavoritename password_hash: be121740bf988b2225a313fa1f107ca1 secret: a secret something username是用户名password_hash是密码的哈希映射值,由于不同版本的node.js的哈希算法是不一样的,所有用以下方法来产生有效的密码哈希值。
$ node > const bcrypt = require('bcrypt-nodejs') > bcrypt.hashSync('your password secret here!') //=> '$2a$10$8f0CO288aEgpb0BQk0mAEOIDwPS.s6nl703xL6PLTVzM.758x8xsi'secret是用于产生cookie值的。在站点配置文件中设置好以下三个值之后,登录 http://localhost:4000/admin/ 就会提示输入账号密码。
在网站的根目中的_config.yml文件设置
feed: type: atom path: atom.xml limit: 20 hub: content:type - Feed type. (atom/rss2) path - Feed path. (Default: atom.xml/rss2.xml) limit - Maximum number of posts in the feed (Use 0 or false to show all posts) hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it) content - (optional) set to ‘true’ to include the contents of the entire post in the feed.
安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:
$ npm install hexo-generator-searchdb --save编辑 站点配置文件,新增以下内容到任意位置:
search: path: search.xml field: post format: html limit: 10000除了安装本地搜索,还可以考虑 * swiftype * 的搜索。
Hexo有很多主题,可以在 * Hexo官网的主题页面 *选择自己喜欢。 以Next为例,本站使用的就是Next主题。
使用Git来获取主题文件
$ cd your-hexo-site $ git clone https://github.com/iissnan/hexo-theme-next themes/next直接在Next的 GitHub主页 下载主题文件
将Next文件夹放到theme文件夹中,修改站点配置文件,也就是网站根目录下的_config.yml文件中的theme:
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next重启hexo的开发服务器就能看到新主题的效果了。
$sudo hexo serverScheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白 Mist - Muse 的紧凑版本,整洁有序的单栏外观 Pisces - 双栏 Scheme,小家碧玉似的清新Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可。
选择 Pisce Scheme
#scheme: Muse #scheme: Mist scheme: Pisces设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。
菜单示例配置
menu: home: / archives: /archives #about: /about #categories: /categories tags: /tags #commonweal: /404.html若你的站点运行在子目录中,请将链接前缀的 / 去掉
NexT 默认的菜单项有(标注 的项表示需要手动创建这个页面):
键值设定值显示文本(简体中文)homehome: /主页archivesarchives: /archives归档页categoriescategories: /categories分类页tagstags: /tags标签页aboutabout: /about关于页面commonwealcommonweal: /404.html公益 404设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的
languages/{language}.yml ({language} 为你所使用的语言)。以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu 字段下添加一项:
menu: home: 首页 archives: 归档 categories: 分类 tags: 标签 about: 关于 search: 搜索 commonweal: 公益404 something: 有料 ``` 设定菜单项的图标,对应的字段是 menu_icons。 此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。菜单图标配置示例
menu_icons: enable: true # Icon Mapping. home: home about: user categories: th tags: tags archives: archive commonweal: heartbeat编辑 站点配置文件,新增字段 avatar, 值设置成头像的链接地址。
avatar: http://i5.tietuku.com/0d972d2b106fc7ea.jpg在主题配置文件中,设置:
# Put your favicon.ico into `hexo-site/source/` directory. favicon: favicon.ico把你的网站图标放到站点的source下面
在站点配置文件中修改
# Site title: Tony's blog subtitle: description: Everthing will going to be all right. author: Tony Dandelion language: zh-Hans timezone:执行了这三条命令之后,在站点的source目录下就会有tags、categories、about三个文件夹,里面都对应有一个index.md的文件,在tags文件夹中的index.md中,修改type为tags,如下所示,相应的categories和about也把对应位置的type值改为categories和about。
--- title: tags date: 2017-01-28 14:34:11 type: "tags" ---在about文件中的index.md文件中可以使用MarkDown语法来写自我介绍。
第一步
首先在网上找或者自己PS一张心仪的图片,取名background.jpg,把它放在
Hexo\source\image路径下。
第二步
进入
Hexo\themes\hexo-theme-next\source\css\_common\components\header目录,找到 header.styl 文件,双击打开。
将第一行默认的
.header { background: $head-bg; }修改为
.header { background: url('../image/background.jpg'); }然后重新上传博客即可
hexo clean hexo generate hexo deploy大功告成。
并不建议修改这个,毕竟使用了别人的劳动成果,就应该说清楚。
参考链接
登录多说,填写表单,创建站点
记录下多说域名,也就是上图中红框中的部分,不包括前面的 http:// 和后面的 duoshuo.com
创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中红色框里的值。
多说设置示例
duoshuo_shortname: 多说域名内容hexo server 命令启动的是一个测试服务器,不建议用户生产环境,可以使用Apache或者nginx来部署hexo
在网站根目录下会生成一个public文件夹,这就是我们要发布的内容,记录下路径为/home/ubuntu/blog/public
nginx的安装目录为/etc/nginx,所有的配置文件都在这里。nginx的默认首页目录为/usr/share/nginx/html要对其进行修改。
修改/etc/nginx/sites-available/default中的/usr/share/nginx/html为/home/ubuntu/blog/public
server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; # root /usr/share/nginx/html; root /home/ubuntu/blog/public; index index.html index.htm; ..... }完成上述配置之后需要确保服务器的端口都开放了,腾讯云服务器的默认安全组是不开发任何端口的,需要前往腾讯云控制台进行修改。
然后修改防火墙,开放80端口,ubuntu有一个易用的防火墙管理工具,名为uwf。我们使用它来进行防火墙管理。
运行以上两条命令后,开启了防火墙,并在系统启动时自动开启。 关闭所有外部对本机的访问,但本机访问外部正常。
为了使mysql可以远程访问,开启mysql的3306端口
eg: sudo ufw allow 3306或者
sudo service nginx start sudo service nginx restart sudo service nginx stop在使用上面这条命令知道是哪一个进程占用了80端口后就使用kill命令跟上进程ID杀掉进程。
sudo kill ID两条命令相互配合就能把端口分配给任何进程了
修改配置文件的字段值的时候,要注意格式固定为:
Key: Value属性值与冒号之间必须为一个空格,不能是回车或者其他任何东西。
先执行hexo clean再执行hexo generate,之后再访问80端口,如果效果迁移成功了,就OK了,否则执行下面的操作。
关闭nginx服务,将hexo的调试服务器开放到80端口。
访问一次80端口,OK了再切回nginx监听80端口。
在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:
在文章中使用 <!– more –>手动进行截断,Hexo 提供的方式 推荐在文章的 front-matter 中添加 description,并提供文章摘录自动形成摘要,在 主题配置文件 中添加: auto_excerpt: enable: true length: 150