利用Hexo在github上搭建个人博客

利用Hexo在github上搭建个人博客

一、前期准备

1. 申请Github账户

进入Github网站,按照提示进行注册,然后登录。

Github主界面

登录完成之后,在你的主页点击图标New Repository创建一个新的版本库,因为我们是使用Github Pages去搭建我们的静态博客,所以版本库的名称应该是:用户名+.github.io。如:我的用户名是:javyxu,那么版本库的名字应该是:javyxu.github.io,这个是一定不能出错的。因为之后你将要访问的你的博客地址就是:https://javyxu.cn

新建仓库界面

至此,Github账号创建完成,GIthub Pages 所需要的版本库也创建好了。

2. 申请leancloud账户

为何要注册Leancloud,因为我们的统计量、评论系统其实是放在Leancloud上的,因此首先需要去注册一个账号。Leancloud官网,点我注册

注册完以后需要创建一个应用,名字可以随便起,比如blog,为了我们的评论和统计可以使用,我们新建两个Class,分别命名为CommentCounter,如下图所示

leancloud1

最后进入应用->设置->应用key获取你的appidappkey如图所示:

leancloud2

这两个信息在后期的主题配置文件中会用到。

3. 申请clustrmaps账户

为何要注册clustrmaps,因为我想知道每天有些人,来自哪里的人查看了我的博客,因此首先需要去注册一个账号。clustrmaps官网,点我注册

注册完以后点击Create New Widget 创建新的网址:

然后选择你的Widget 类型,本人选择的是Globe Widget

然后拷贝下图显示的安装代码:

将代码放置在何处请看文章2-16处。

二、 hexo安装和配置

Hexo的安装在其官方文档中有很详细的说明。下面将简单介绍Hexo的安装。

1. 安装前提

安装 Hexo 相当简单。然而在安装前,检查电脑中是否已安装下列应用程序:Node.jsGit

  • 安装 git

    Windows:下载并安装git.
    Mac:使用Homebrew:brew install git。
    Linux (Ubuntu, Debian):sudo apt-get install git-core
    Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

  • 安装 Node.js

    安装Node.js的最佳方式是使用nvm

    cURL:

    1
    curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

    Wget:

    1
    wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

    安装完成后,重启终端并执行下列命令即可安装 Node.js。

    1
    nvm install stable

2. hexo安装和配置

  • 安装并初始化

    1
    2
    3
    4
    npm install -g hexo-cli
    hexo init hexo_blog
    cd hexo_blog
    npm install
  • 新建完成后,指定文件夹的目录如下:

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    | ├── _drafts
    | └── _posts
    └── themes
  • _config.yml

    可以在此配置大部分的参数。

  • package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    "name": "hexo-site",
    "version": "0.0.0",
    "private": true,
    "hexo": {
    "version": "3.8.0"
    },
    "dependencies": {
    "hexo": "^3.8.0",
    "hexo-asset-image": "0.0.3",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index-pin-top": "^0.2.2",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.1"
    }
    }
  • source

    资源文件夹是存放用户资源的地方。除_posts文件夹之外,开头命名为_(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到public文件夹,而其他文件会被拷贝过去。

  • themes

    是主题文件夹,Hexo会根据主题来生成不同的静态页面。

  • scaffolds

    是模板件夹,当新建文章的时候,Hexo会根据模板来建立文件。

二、优化个人博客

  1. 安装next 主题

    • 下载next主题

      1
      2
      cd ./themes
      git clone https://github.com/iissnan/hexo-theme-next next
    • 修改hexo配置文件

      vi _config.yml

      1
      2
      3
      4
      # Extensions
      ## Plugins: https://hexo.io/plugins/
      ## Themes: https://hexo.io/themes/
      theme: next # landscape
  2. 修改的站点显示信息

    vi ./_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Site
    title: S.T.DB # 修改站点标题
    subtitle: Javy's Blog # 修改站点子标题
    description: # 站点描述信息
    keywords:
    author:
    email:
    language:
    timezone:
  3. 修改菜单信息

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    5
    6
    menu:
    home: / || home
    about: /about/ || user
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
  4. 修改背景动图

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini 本人设置的是这种
  5. 设置社交信息

    vi ./theme/next/_config.yml

    1
    2
    3
    social:
    GitHub: https://github.com/javyxu || GitHub
    E-Mail: mailto:xujavy@gmail.com || G-Mail
  6. 设置侧边栏的显示位置

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    sidebar:
    # Sidebar Position, available value: left | right (only for Pisces | Gemini).
    #position: left
    position: right
  7. 设置站点显示头像图片

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    5
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.gif
    # in site directory(source/uploads): /uploads/avatar.gif
    #avatar: /images/avatar.gif
    avatar: /images/avatar.jpg

    讲头像图片放置在根目录下的imgaes下

  8. 设置查询

    vi ./_config.yml

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  9. 设置底部心形图标

    vi ./themes/next/layout/_partials/footer.swig

    1
    2
    3
    4
    <span class="with-love">
    <!-- <i class="fa fa-{{ theme.footer.icon }}"></i> -->
    <i class="fa fa-heart"></i>
    </span>
  10. 发布文章中图片的显示

    图片除了可以放在统一的images文件夹中,还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。

    vi ./_config.yml

    1
    post_asset_folder: true

    执行命令hexo new post_name,在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中,文章就可以使用相对路径引用图片资源了。

    ![imgae](post_name/image.jpg)

  11. 设置文章阅读量

    vi ./themes/next/layout/_partials/footer.swig

    1
    2
    3
    4
    5
    6
    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
    enable: true
    app_id: #<app_id>
    app_key: #<app_key>
  12. 设置博客访问人次和总体访问量

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # Show PV/UV of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    # count values only if the other configs are false
    enable: true
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i> 访问人数
    site_uv_footer: 人次
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i> 总访问量
    site_pv_footer: 次
    # custom pv span for one page only
    page_pv: false
    page_pv_header: <i class="fa fa-file-o"></i>
    page_pv_footer:

    vi ./themes/next/layout/_partials/footer.swig

    1
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
  13. 设置评论区

    vi ./theme/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Valine.
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
    enable: true
    appid: # your leancloud application appid
    appkey: # your leancloud application appkey
    notify: true # mail notifier , https://github.com/xCss/Valine/wiki
    verify: true # Verification code
    placeholder: 留言 # comment box placeholder
    avatar: mm # gravatar style
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
  14. 配置博客置顶

    为了防止每次更新、安装都要修改代码,现在可以直接从仓库里安装:

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

    然后在需要置顶的文章的Front-matter中加上top: true即可。

  15. 显示文章摘要

    • 在文章中使用< !--more-->手动进行截断
      这种方法可以根据文章的内容,自己在合适的位置添加< !--more-->标签,使用灵活,也是Hexo推荐的方法。

    • 在文章中的front-matter中添加description,并提供文章摘录
      这种方式只会在首页列表中显示文章的摘要内容,进入文章详情后不会再显示。

    • 自动形成摘要,在主题配置文件中添加,默认截取的长度为150字符,可以根据需要自行设定

    vi ./theme/next/_config.yml

    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150
  16. 添加搜索功能

    • 安装 hexo-generator-searchdb 插件
    1
    npm install hexo-generator-searchdb --save
    • vi ./_config.xml2
    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
    • vi ./theme/next/_config.yml
    1
    2
    local_search:
    enable: true
  17. 在侧边栏显示地球统计

    Globe Widget Installation拷贝的代码,添加到 ./theme/next/_custom/sidebar.swig 中即可。

    最终显示结果,请看本人博客主页。

三、 生成和发布

1
2
3
4
hexo clean # 清除之前生成的静态页面
hexo generate # 生成静态页面,生成的内容在public文件夹下
hexo server # 启动本地服务,进行文章预览调试。hexo
hexo deploy # 部署到github

四、 部署在github上

  • 安装部署插件

    1
    2
    npm install hexo --save
    npm install hexo-deployer-git --save
  • 配置git账户信息

    1
    2
    git config --global user.name "your name"
    git config --global user.email "email@email.com"
  • 修改hexo配置文件

    vi ./_config.yml

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo:
    github: git@github.com:javyxu/javyxu.github.io.git,master

五、如何备份已发布的博客

最终设计结果,请看本人博客