欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Hexo+GitHub博客搭建

程序员文章站 2023-12-24 11:23:45
...

安装Hexo

  1. 简介

    • Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
    • 详细内容请查看Hexo官方文档

  2. 安装

    安装Hexo前，需先安装下列应用程序：

    • Node.js (Node.js 版本需不低于8.6，建议使用 Node.js 10.0 及以上版本)
    • Git

    安装完成之后，在Git Bash命令行输入下列命令即可自行下载安装hexo

     	$ npm install -g hexo-cli

建站

  1. 安装Hexo完成后，执行下列命令，Hexo将会在指定文件夹中新建所需要的文件。

     $ hexo init <folder>
 $ cd <folder>	
 $ npm install

    新建完成后，指定文件夹的目录如下：

     .
 ├── _config.yml
 ├── package.json
 ├── scaffolds
 ├── source
 |   ├── _drafts
 |   └── _posts
 └── themes

    • hexo相关命令均在站点目录下，用Git Bash运行。

    • 站点配置文件：站点目录下的_config.yml。路径为_config.yml

    • 主题配置文件：站点目录下的themes文件夹下的，主题文件夹下的_config.yml。路径为\themes<主题文件夹>_config.yml

  2. 修改站点配置文件

    参数 描述
    title 网站标题
    subtitle 网站副标题
    description 网站描述
    keywords 网站的关键词。使用半角逗号 , 分隔多个关键词。
    author 您的名字
    language 网站使用的语言，简体中文为 zh-CN
    timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
    参数 描述 默认值
    url 网址
    root 网站根目录
    permalink 文章的 永久链接 格式 :year/:month/:day/:title/
    permalink_defaults 永久链接中各部分的默认值
    pretty_urls 改写 permalink 的值来美化 URL
    pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html，设置为 false 时去除 true

    以上信息都在站点配置文件中，具体内容根据用户自身情况修改

    • 网站存放在子目录

    如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为/blog/。

     	# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
 	pretty_urls:
 		trailing_index: false
 	# 此时页面的永久链接会变为 http://example.com/foo/bar/

  3. 启动服务器。在路径下，命令行（即Git Bash）输入以下命令，运行即可：

     $ hexo server

    或简写为：

     $ hexo s

  4. 浏览器访问网址： http://localhost:4000/，便可预览Hexo博客。

部署

  1. 在你的GitHub账号里新建仓库， 仓库名为：{Github账号名称}.github.io，并添加SSH key。

  2. 修改_config.yml（在站点目录下）。文件末尾修改为：

     # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
 	type: git
 	repo:  https://github.com/<Github账号名称>/<Github账号名称>.github.io.git
 	branch: master

  3. 安装hexo-deployer-git插件。在命令行（即Git Bash）运行以下命令即可：

     $ npm install hexo-deployer-git --save

  4. 推送到GithubPages。在命令行（即Git Bash）依次输入以下命令， 返回INFO Deploy done: git即成功推送：

     $ hexo g
 $ hexo d

    或输入

     $ hexo g -d

    或输入

     $ hexo d -g

  5. 等待1分钟左右，浏览器访问网址：https://{Github账号名称}.github.io

选择主题

应用主题

  1. 将下载好的主题文件夹，粘贴到站点目录的themes下。

  2. 更改站点配置文件_config.yml 的theme字段，为主题文件夹的名称：

     # Extensions
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
 theme: <主题文件夹的名称>

主题优化

以下均为 Next 7+ 版本的主题优化，Next主题配置文件中已经提供了很多功能，需要使用时只需稍微修改即可。

设定站点建立时间

  • 打开themes/next/下的_config.yml，查找since（默认为当前年份）：

      footer:
    # Specify the date when the site was setup.
    # If not defined, current year will be used.
    #since: 2019

设置主题风格

  • 打开themes/next/下的_config.yml，查找Schemes，根据个人爱好选择不同的主题风格，将前面的注释“#”删除即可应用该风格。

      # Schemes
  #scheme: Muse
  #scheme: Mist
  #scheme: Pisces
  scheme: Gemini

设置代码高亮主题

  • NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties，依次如下图所示：

    Hexo+GitHub博客搭建

  • 更改主题配置文件中的 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：

      # Code Highlight theme
  # Available value: normal | night | night eighties | night blue | night bright
  # https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal

设置头像

  • 打开themes/next/下的_config.yml，查找avatar

      avatar:
    # Replace the default image and set the url here.
    url: /images/avatar.gif

设置侧边栏

  • 设置显示位置：打开themes/next/下的_config.yml，查找sidebar

      sidebar:
  position: left
  #position: right

  • 设置显示时机：

      #post - 默认行为，在文章页面（拥有目录列表）时显示
  #always - 在所有页面中都显示
  #hide - 在所有页面中都隐藏（可以手动展开）
  #remove - 完全移除
  display: post
  #display: always
  #display: hide
  #display: remove

设置动画效果

  • NexT 默认开启动画效果，效果使用 JavaScript 编写，因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度，可以将设置此字段的值为 false 来关闭动画。

  • 编辑 主题配置文件， 搜索 use_motion，根据您的需求设置值为 true 或者 false 即可：

      use_motion: true  # 开启动画效果
  use_motion: false # 关闭动画效果

设置背景动画

共有两种动画，其中three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

  • 第一种

    • 编辑 主题配置文件， 搜索 canvas_nest

        # canvas_nest
  canvas_nest: true //开启动画
  canvas_nest: false //关闭动画

  • 第二种

    1. 进入theme/next目录

    2. 执行命令：git clone https://github.com/theme-next/theme-next-three source/lib/three

    3. 将themes/next/_config.yml中查找three字段，将想要的效果改为true即可：

       # three_waves
 three_waves: false
 # canvas_lines
 canvas_lines: true
 # canvas_sphere
 canvas_sphere: false

修改字体大小

  • 在themes/next/_config.yml中搜索Font，可以修改。

      font:
    enable: true
  
    # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
    host:
  
    # 全局字体，应用在 body 元素上
    global:
      external: true
      family: Monda
  
    # 标题字体 (h1, h2, h3, h4, h5, h6)
    headings:
      external: true
      family: Roboto Slab
  
    # 文章字体
    posts:
      external: true
      family:
  
    # Logo 字体
    logo:
      external: true
      family: Lobster Two
      size: 24
  
    # 代码字体，应用于 code 以及代码块
    codes:
      external: true
      family: PT Mono

  • 上述方法不太理想，还可以在themes\next\source\css_variables\base.styl中修改。

      // Font size
  $font-size-base           = 1em;		//整体大小
  $font-size-smallest       = .75em;		//首页阅读时长等
  $font-size-smaller        = .8125em;	//侧边栏（归档等）
  $font-size-small          = .875em;		//阅读全文及文中内容
  $font-size-medium         = 1em;		//头像下边日志、分类、标签
  $font-size-large          = 1.125em;	//首页文章标题
  $font-size-larger         = 1.25em;
  $font-size-largest        = 1.375em;	//用户名

修改访问URL路径

  • 默认情况下访问URL路径为：domain/2018/10/18/关于本站,修改为 domain/About/关于本站。 编辑 Hexo 站点下的 _config.yml 文件，修改其中的 permalink字段：

      permalink: :category/:title/

设置菜单及页面

  • 打开themes/next/下的_config.yml，查找menu，去掉#注释即可显示对应的菜单项，也可自定义新的菜单项。 ||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

      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

  • 新添加的菜单需要翻译对应的中文，打开hexo/theme/next/languages/zh-CN.yml，在menu下自定义，如：

      menu:
    download: 下载

创建分类页

  1. 将主题配置文件中menu下方categories前的注释去掉。

  2. 在终端窗口下，定位到 Hexo 站点目录下，新建：

     $ cd <站点目录>
 $ hexo new page categories

    此时在根目录的source文件夹下会生成一个categories文件，文件中有一个index.md文件，修改内容如下：

     ---
 title: 分类
 date: 2017-12-14 13:05:38
 type: "categories"
 comments: false
 ---

    注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

创建标签页

  1. 将主题配置文件中menu下方tags前的注释去掉。

  2. 在终端窗口下，定位到 Hexo 站点目录下，新建：

     $ cd <站点目录>
 $ hexo new page tags

    启用/关闭评论同创建分类页。

  3. 一篇文章有多个标签时按下面的格式填写：

     title: 标签测试文章
 tags:
   - Testing
   - Another Tag
 ---

侧边栏社交链接

  1. 链接放置在主题配置文件中的 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

     # Social links
 social:
   GitHub: https://github.com/your-user-name
   Twitter: https://twitter.com/your-user-name
   微博: http://weibo.com/your-user-name
   豆瓣: http://douban.com/people/your-user-name
   知乎: http://www.zhihu.com/people/your-user-name
   # 等等

  2. 设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

     # Social Icons
 social_icons:
   enable: true
   # Icon Mappings
   GitHub: github
   Twitter: twitter
   微博: weibo

友情链接

  • 修改主题配置文件中的link字段即可：

      # title
  links_title: Links
  links:
    MacTalk: http://macshuo.com/
    Title: http://example.com/

腾讯公益404页面

  • 腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html

  • 使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

      <!DOCTYPE HTML>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
  </head>
  <body>
    <script type="text/plain" src="http://www.qq.com/404/search_children.js"
            charset="utf-8" homePageUrl="/"
            homePageName="回到我的主页">
    </script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
  </html>

显示当前浏览进度

  • 修改themes/*/_config.yml，把 false 改为 true：

      # Back to top in sidebar
  b2t: true
  # Scroll percent label in b2t button
  scrollpercent: true

添加搜索功能

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

     $ npm install hexo-generator-searchdb --save

  2. 编辑站点配置文件，新增以下内容到任意位置（7.5+版本不加也可以）：

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

  3. 编辑 主题配置文件，启用本地搜索功能：

     # Local search
 local_search:
   enable: true

博文置顶

  1. 安装插件

     $ npm uninstall hexo-generator-index --save
 $ npm install hexo-generator-index-pin-top --save

  2. 然后在需要置顶的文章的Front-matter中加上top即可：

     title: 2018
 date: 2018-10-25 16:10:03
 top: 10

  3. 设置置顶标志，打开：/themes/*/layout/_macro/post.swig，定位到，插入以下代码即可：

     {% if post.top %}
   <i class="fa fa-thumb-tack"></i>
   <font color=7D26CD>置顶</font>
   <span class="post-meta-divider">|</span>
 {% endif %}

首页显示文章摘要

  • 打开themes/next/下的_config.yml，查找excerpt

      auto_excerpt: //自动摘录
    enable: false
    length: 150 //摘录字数

阅读更多按钮

  • 打开themes/next/下的_config.yml，查找read_more_btn：

      read_more_btn: true //显示全文按钮

  • 在文章中添加**<!–more–>**，其后面的内容在主页将不显示。

设置图片可放大

  1. 打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true

  2. 进入到theme/text/文件夹下，打开git bash

  3. git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

    注：Next 7.5及以上版本不必下载。

添加访问量统计

  • 打开themes/next/下的_config.yml，查找busuanzi

      busuanzi_count:
    enable: true
    total_visitors: false			# 站点总访问量
    total_visitors_icon: user		# 站点总访问量的小图标
    total_views: false			# 总浏览量（所有页面的总浏览量）
    total_views_icon: eye			# 总浏览量的小图标
    post_views: true				# 文章浏览量
    post_views_icon: eye			# 文章浏览量的小图标

添加评论系统-Valine

  1. 我们的评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号

  2. 创建一个应用，名字可以随便起，然后 进入应用->设置->应用key，获取appid 和 appkey

  3. 打开主题配置文件 搜索 valine，填入appid 和 appkey：

     valine:
   enable: true
   appid:  <your app id>
   appkey: <your app key>
   notify: false # mail notifier , https://github.com/xCss/Valine/wiki
   verify: false # Verification code
   placeholder: 快来输入你的评论吧......
   guest_info: nick,mail,link
   pageSize: 10

  4. 在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去。

添加字数统计和阅读时长

  1. 安装hexo-symbols-count-time

     $ npm install hexo-symbols-count-time --save

  2. 如果安装完报如下提醒，还需安装eslint

     npm WARN aaa@qq.com requires a peer of aaa@qq.com>= 4.12.1 but none is installed. You must install peer dependencies yourself.

    安装eslint

     $ npm install eslint --save

  3. 修改themes/next/下的_config.yml中如下内容：

     symbols_count_time:
   separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
   item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
   item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
   awl: 4                   # Average Word Length
   wpm: 275                 # Words Per Minute（每分钟阅读词数）
   suffix: mins.

订阅微信公众号

  • 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后。

  • 在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

  • 在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

  • 然后编辑 主题配置文件，如下：

      # Wechat Subscriber
  wechat_subscriber:
    enabled: true
    qcode: /uploads/wechat-qcode.jpg
    description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

添加打赏功能

  • 在themes/next/_config.yml中搜索reward，修改内容，并在指定路径下放置自己的支付二维码。

      reward_settings:
    enable: false
    animation: true					# 动画
    comment: 感谢您的支持！

  reward:
    wechatpay: /images/wechatpay.jpg	# 微信
    alipay: /images/alipay.jpg		# 支付宝
    #bitcoin: /images/bitcoin.png     # 比特币

文末添加版权声明

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

常用操作

  1. init

     $ hexo init [folder]

    新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

  2. new

     $ hexo new [layout] <title>
    • [layout]可以为以下三种：
    参数名 功能 文章路径
    post 新建博文 source/_posts
    page 新建页面（如404，分类） source
    draft 草稿 source/_drafts

    • 如果标题包含空格的话，请使用引号括起来。

    • title 不是博文标题，是博文markdown文件的名字，也是博文链接的后缀（如https://www.simon96.online/2018/10/12/hexo-tutorial/中的hexo-tutorial）

  3. generate

     $ hexo generate

    生成静态文件。

  4. publish

     $ hexo publish [layout] <filename>

    发表草稿。

  5. server

     $ hexo server

    启动服务器。默认情况下，访问网址为： http://localhost:4000/。

  6. deploy

     $ hexo deploy

    部署网站。

  7. clean

     $ hexo clean

    • 清除缓存文件 (db.json) 和已生成的静态文件 (public)。

    • 在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

  8. version

     	$ hexo version

    显示 Hexo 版本。

参考：

相关标签： 工具使用

上一篇：

下一篇：

推荐阅读