sunwengang blog

developer | android display/graphics

Use hexo and github to build website

sunwengang's Avatar 2019-07-05 web

分享本文
  1. 1. 1. 安装node.js
  2. 2. 2. 配置hexo
  3. 3. 3. 初始化hexo工作目录
    1. 3.1. 1. mkdir hexo //新建文件夹
    2. 3.2. 2. hexo init hexo //初始化hexo工作目录
  4. 4. 4. 编译运行登录
    1. 4.1. 1. hexo g //build
    2. 4.2. 2. hexo s //生成服务端
  5. 5. 5. 发布到github
    1. 5.1. 1. 在根目录的_config.yml（非theme主题文件下的配置文件）修改
    2. 5.2. 2. 安装插件
    3. 5.3. 3. 发布到github
    4. 5.4. 4. 查看结果，例如我的网站wizzie.top
  6. 6. 6. 修改配置_config.yml
    1. 6.1. 1. 修改主题
    2. 6.2. 2. 修改博主信息
    3. 6.3. 3. hexo文件夹结构
    4. 6.4. 4. 主页配置（分页大小、排序规则）
    5. 6.5. 5. 网站日期格式
  7. 7. 7. 修改theme的_config.yml(Next主题)
    1. 7.1. 1. 主题选择
    2. 7.2. 2. 菜单配置
    3. 7.3. 3. LOGO修改
    4. 7.4. 4. 页脚配置
    5. 7.5. 5. 主页阅读全文设置
    6. 7.6. 6. 评论系统
    7. 7.7. 7. 右上角github
    8. 7.8. 8. 创建page(menu标签)
    9. 7.9. 9. 创建文章和草稿
    10. 7.10. 10. 头像显示
    11. 7.11. 11. 浏览进度按钮
    12. 7.12. 12. 侧边栏社交图标
    13. 7.13. 13. 侧边栏其余外部链接
    14. 7.14. 14. 修改底部user文字
    15. 7.15. 15. 修改加载进度条
    16. 7.16. 16. 打开本地搜索
    17. 7.17. 17. 文章顶部显示时间信息
    18. 7.18. 18. 文章阅读量统计
  8. 8. 8. 修改主题背景custom.styl
  9. 9. 9. 修改文章底部标签#
  10. 10. 10. 修改文章链接样式
  11. 11. hexo-admin配置后台
    1. 11.1. 部署步骤
    2. 11.2. hexo的_config.xml配置

这篇文章主要是讲述如何结合hexo和github建站。使用hexo+github建站，相对减少开发时间和成本。
相关Link： hexo官方文档、github建站Issue、我的网站

1. 安装node.js

2. 配置hexo

npm install -g hexo-cli

3. 初始化hexo工作目录

1. mkdir hexo //新建文件夹

2. hexo init hexo //初始化hexo工作目录

note: 可能需要安装一些依赖，按照log的指示配置。

1
2
生成目录文件夹：
TODO

4. 编译运行登录

1. hexo g //build

2. hexo s //生成服务端

使用http://localhost:4000/ 即可查看结果。

本地测试也可以使用127.0.0.1:4000访问，或者内网IP:4000 方式访问（ipconfig查看）
note: 如果有修改，可以使用hexo clean清除public等文件，再重新编译运行。结果文件是public文件夹。

5. 发布到github

1. 在根目录的_config.yml（非theme主题文件下的配置文件）修改

1
2
3
4
deploy:
  type: git
  repository: git@github.com:***/***.github.com.git
  branch: master

2. 安装插件

npm install hexo-deployer-git –save

3. 发布到github

hexo deploy

4. 查看结果，例如我的网站wizzie.top

note: 需要在你购买域名的万网进行域名绑定解析到github，please google by yourseflf。

6. 修改配置_config.yml

1. 修改主题

推荐主题： 官方主题、Next套装主题（不需要安装基础依赖插件，简单配置使用）

例如下载Next主题仓库，然后在_config.yml中修改，编译后查看结果即可：

1
2
3
4
5
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: next

2. 修改博主信息

1
2
3
4
5
6
7
8
# Site
title: 博客     //标题
subtitle:       //子标题
description:
keywords:
author: wizzie      //作者
language: zh-CN   //网站语言，可在theme目录的language查看
timezone:

3. hexo文件夹结构

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source    //资源文件夹
public_dir: public   //网站构建生成
tag_dir: tags       //标签
archive_dir: archives       //日期归档
category_dir: categories    //分类（使用hexo page "categories"生成）
code_dir: downloads/code    //下载
i18n_dir: :lang   //语言
skip_render: README.md   //可以避免该文件构造成html

4. 主页配置（分页大小、排序规则）

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

5. 网站日期格式

1
2
3
4
5
6
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

7. 修改theme的_config.yml(Next主题)

1. 主题选择

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

2. 菜单配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || home
  archives: /archives/ || archive
  categories: /categories/ || th
  tags: /tags/ || tags
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

3. LOGO修改

1
2
3
4
5
6
7
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

4. 页脚配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: user          //图标可以到提供的网站修改
    # If you want to animate the icon, set it to true.
    animated: false     //动画效果
    # Change the color of icon, using Hex Code.
    color: "#808080"        //图标颜色

  # If not defined, `author` from Hexo main config will be used.
  copyright:

  powered:
    # Hexo link (Powered by Hexo).  //关闭hexo强力驱动显示
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).   //关闭next主题显示
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # http://www.beian.miit.gov.cn
  beian:
    enable: false
    icp:

5. 主页阅读全文设置

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true      //修改成true
  length: 150   //显示字数

6. 评论系统

配置文件提供了一些畅言、Valine(要指定next版本)、gitment、gitalk等，选择其中一个进行配置，配置方法见另一篇文章。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ---------------------------------------------------------------
# Comments and Widgets
# See: https://theme-next.org/docs/third-party-services/comments-and-widgets
# ---------------------------------------------------------------
.......
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true
  github_id:  # Github repo owner
  repo:  # Repository name to store issues
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Secret
  admin_user:  # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language:

7. 右上角github

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: false   //修改成true
  permalink: https://github.com/yourname
  title: Follow me on GitHub

8. 创建page(menu标签)

  1. 在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：
    1
    2
    $ cd your-hexo-site
    $ hexo new page categories
  2. categories目录index.md修改
    date: 2019-05-08 22:40:04
    type: “categories”
  1. 编辑刚新建的页面,设置分类
    title: 分类
    date: 2019-06-01 12:39:04
    categories: Testing #分类名
    type: “categories”

9. 创建文章和草稿

1
2
$ cd you-site
$ hexo new post(或者draft) "you title"

10. 头像显示

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/user.jpg    //使用本地图片
  # If true, the avatar would be dispalyed in circle.
  rounded: true    //是否圆形显示
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1  //透明度
  # If true, the avatar would be rotated with the cursor.
  rotated: true   //是否旋转

11. 浏览进度按钮

1
2
3
4
5
6
back2top:
  enable: true   //是否启用
  # Back to top in sidebar.
  sidebar: false  //是否显示在左侧栏下方
  # Scroll percent label in b2t button.
  scrollpercent: true   //是否显示阅读进度

12. 侧边栏社交图标

1
2
3
4
5
6
7
8
9
10
# Social Links
# Usage: `Key: permalink || icon`
social:
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo

social_icons:
  enable: true
  icons_only: false  //是否只显示图标
  transition: true

13. 侧边栏其余外部链接

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: Links
#links_layout: block
links_layout: inline
links:
  移动平台资源整理: https://mobdevgroup.com/
  Android Developer: https://developer.android.com/docs

14. 修改底部user文字

1
2
# If not defined, `author` from Hexo main config will be used.
  copyright: 'wizzie.top'

15. 修改加载进度条

1
2
3
4
5
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
......
pace_theme: pace-theme-barber-shop

16. 打开本地搜索

1
2
3
4
5
6
7
8
9
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: -1
  # Unescape html strings to the readable one.
  unescape: false

17. 文章顶部显示时间信息

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true   //
  created_at: true   //创建文章时间
  updated_at:
    enable: true    //显示更新时间
    another_day: true   //其他天显示
  categories: true  //分类显示

18. 文章阅读量统计

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

8. 修改主题背景custom.styl

修改source/_custom/custon.styl文件，详情可以查询其他博客案例。

9. 修改文章底部标签#

在theme/layout/_macro/post.swig修改标签：

1
2
//将原有的#替换成<i class="fa fa-tag"></i>
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i>{{ tag.name }}</a>

10. 修改文章链接样式

在theme/next/source/css/custom/custom.styl添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

效果图：
change LinkStyle

note：注意此处的image是放在hexo/source/img/目录下，但是构建之后在public目录下img是一级目录。所以引用的时候不用加上souce/

hexo-admin配置后台

查看github源项目： https://github.com/jaredly/hexo-admin

部署步骤

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

hexo的_config.xml配置

1
2
3
4
5
6
admin:
   username: zoro
   password_hash:be121740bf988b2225a313fa1f107ca1
   secret: hey hexo
   deployCommand: './admin_script/hexo-generate.sh'
  # expire: 60*1

本文作者 : sunwengang
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://alonealive.github.io/Blog/2019/07/05/2019/190705_use_hexo/

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于  , 最后修改于 

web