Hexo安装配置详解

    xiaoxiao2021-03-25  72

    写在开头

    什么是Hexo?

    Hexo是一个轻量级的Node.js博客框架,由一位台湾的在校大学生开发完成!

    Hexo的配置文件_config.yml分为两种,一种是站点配置文件,也就是站点根目录下的_config.yml配置文件,另一个是主题配置文件,位于theme文件夹中对应主题的文件夹下的_config.yml。

    在后续的网站配置中需要多次使用站点配置文件和主题配置文件,需要注意辨析。

    另外,需要注意的是本文部署hexo的服务器是腾讯云服务器,Ubuntu16.04系统。


    安装node.js

    Windows下安装

    在nodejs官网上下载最新的Windows安装包,直接安装即可。

    ubuntu下安装

    命令行方式安装:

    sudo apt-get update sudo apt-get install nodejs

    编译源码方式安装:

    在nodejs官网上找到需要下载的源码(不是二进制文件),解压之后进入目录,执行:

    $ ./configure $ make && make install

    注意如果需要sudo的话, make和make install 要分开,因为sudo不能传递到&&后面的指令。

    安装npm

    sudo apt-get update sudo apt-get install npm

    查看node和npm版本

    node -v npm -v

    安装cnpm

    因为防火墙的缘故,很多境外网站被墙了,所以使用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]

    Hexo的安装与使用

    安装Hexo

    安转了node之后,就可以使用以下命令来安装hexo:

    $ npm install -g hexo-cli

    使用Hexo

    安装 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插件

    在hexo中实现可视化编辑博客(hexo-admin)

    hexo-admin-github

    安装并使用hexo-admin

    npm install --save hexo-admin hexo server -d open http://localhost:4000/admin/

    设置后台密码

    修改站点配置文件,就是网站根目录下的 _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/ 就会提示输入账号密码。

    在hexo中实现RRS功能( hexo-generator-feed )

    安装

    $ npm install hexo-generator-feed --save

    配置

    在网站的根目中的_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中实现本地搜索功能(hexo-generator-searchdb)

    安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

    $ npm install hexo-generator-searchdb --save

    编辑 站点配置文件,新增以下内容到任意位置:

    search: path: search.xml field: post format: html limit: 10000

    除了安装本地搜索,还可以考虑 * swiftype * 的搜索。


    更换hexo主题

    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 server

    为hexo设置tags、categrories、图标、头像等

    选择 Scheme

    Scheme 是 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

    设定菜单内容,对应的字段是 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:

    配置categories(目录云)、tags(标签云)、about(关于我)

    hexo new page "tags" hexo new page "categories" hexo new page "about"

    执行了这三条命令之后,在站点的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语法来写自我介绍。

    修改Next文件的头部背景图片

    第一步

    首先在网上找或者自己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

    大功告成。

    修改Next的底部power by图标

    并不建议修改这个,毕竟使用了别人的劳动成果,就应该说清楚。

    参考链接

    配置第三方功能

    使用多说的评论服务

    登录多说,填写表单,创建站点

    记录下多说域名,也就是上图中红框中的部分,不包括前面的 http:// 和后面的 duoshuo.com

    创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中红色框里的值。

    多说设置示例

    duoshuo_shortname: 多说域名内容

    配合nginx部署hexo

    hexo server 命令启动的是一个测试服务器,不建议用户生产环境,可以使用Apache或者nginx来部署hexo

    生成Hexo的静态文件用于部署

    sudo hexo generate

    在网站根目录下会生成一个public文件夹,这就是我们要发布的内容,记录下路径为/home/ubuntu/blog/public

    安装nginx并修改根目录

    sudo apt-get install nginx nginx -v

    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。我们使用它来进行防火墙管理。

    安装

    sudo apt-get install ufw

    启用

    sudo ufw enable sudo ufw default deny

    运行以上两条命令后,开启了防火墙,并在系统启动时自动开启。 关闭所有外部对本机的访问,但本机访问外部正常。

    查看防火墙状态

    sudo ufw status

    防火墙版本

    sudo ufw version

    开启/关闭防火墙 (默认设置是’disable’)

    sudo ufw enable|disable

    开启/禁用服务或者端口

    sudo ufw allow|deny [service|port]

    为了使mysql可以远程访问,开启mysql的3306端口

    eg: sudo ufw allow 3306

    启动、停止、重启nginx

    sudo /etc/init.d/nginx start sudo /etc/init.d/nginx restart sudo /etc/init.d/nginx stop

    或者

    sudo service nginx start sudo service nginx restart sudo service nginx stop

    查看、关闭端口占用的命令

    sudo lsof -i:80

    在使用上面这条命令知道是哪一个进程占用了80端口后就使用kill命令跟上进程ID杀掉进程。

    sudo kill ID

    两条命令相互配合就能把端口分配给任何进程了

    在后台将hexo起在固定端口的命令

    sudo nohup hexo server -p 8066 &

    问题整理

    配置文件的修改问题

    修改配置文件的字段值的时候,要注意格式固定为:

    Key: Value

    属性值与冒号之间必须为一个空格,不能是回车或者其他任何东西。

    部署之后,nginx不能及时显示最新修改的情况。

    先执行hexo clean再执行hexo generate,之后再访问80端口,如果效果迁移成功了,就OK了,否则执行下面的操作。

    关闭nginx服务,将hexo的调试服务器开放到80端口。

    访问一次80端口,OK了再切回nginx监听80端口。

    发现命令没有预期的执行效果,需要加上sudo试一试,可能是权限问题。

    设置只显示部分文章,不全部显示。

    在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:

    在文章中使用 <!– more –>手动进行截断,Hexo 提供的方式 推荐在文章的 front-matter 中添加 description,并提供文章摘录自动形成摘要,在 主题配置文件 中添加: auto_excerpt: enable: true length: 150
    转载请注明原文地址: https://ju.6miu.com/read-32720.html

    最新回复(0)