Use hexo and github to build website

这篇文章主要是讲述如何结合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
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2019-2020 sunwengang
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯咖啡吧~

支付宝
微信