Hexo搭建个人博客 (一) 环境搭建和项目部署

发表于 更新于 分类于
本文字数： 7.1k 阅读时长 ≈ 6 分钟
Hexo初次搭建，过程详细记录。

Hexo搭建个人博客 (一) 环境搭建

一. 技术简述

1.1 GitHub Pages

GitHub中每个项目都有一个对应的主页，列出项目的源文件，GitHub设计了GitHub Pages允许用户自定义首页，替代默认的源代码列表，所以GitHub Pages可以看作托管在GitHub上的静态网页。

1.2 Hexo

Hexo是一个简单快捷高效的博客框架，使用Markdown解析文章。

Hexo+GitHub的优点：

  1. 免费，无限流量。
  2. 享受版本管理功能。
  3. 专注博客内容，其他事情交给GitHub即可。

缺点：静态网页，添加动态功能需要外部服务，没有数据库，每次运行需要遍历全部文本文件，不适合大型网站。

二. 环境搭建

首先下载安装Git，NodeJS，Hexo：

流程：

  • 检查安装成功：

    • Git：

      1
      $ git --version

    • NodeJS：

      1
      node -v

  • 执行安装Hexo命令：

    1
    $ npm install hexo-cli -g

  • 安装便于自动部署到GitHub上的插件

    1
    $ npm install hexo-deployer-git --save

  • 安装atom生成插件以便于其他人订阅

    1
    $ npm install hexo-generator-feed --save

  • 安装博客首页生成插件

    1
    $ npm install hexo-generator-index --save

  • 安装归档生成插件

    1
    $ npm install hexo-generator-archive --save

  • 安装tag生成插件

    1
    $ npm install hexo-generator-tag --save

  • 安装category生成插件

    1
    $ npm install hexo-generator-category --save

  • 安装Sitemap文件生成插件

    1
    $ npm install hexo-generator-sitemap --save

  • 安装百度Sitemap文件生成插件，普通的Sitemap文件不符合百度的格式要求

    1
    $ npm install hexo-generator-baidu-sitemap --save

三. 初始化博客

  1. 创建一个myblog文件夹

    1
    $ mkdir myblog

  2. 在目标文件夹建立博客所需所有文件

    1
    $ hexo init xxxx

    很卡：尝试用下列命令解决，但没有效果

    1
    $ git config --global sendpack.sideband false

    hexo-blog目录会生成以下文件：

    • scaffolds：脚手架，用来存放创建文章时的模板
    • source：用于存放用MarkDown编写的博文原文件，其他的静态资源文件
    • themes：用于存放主题，有默认主题landscape
    • _config.yml：hexo和站点的配置文件，其中可以设置博客名字，标题，作者，链接格式

  3. 执行以下命令进行依赖包安装

    1
    $ sudo npm install

    感觉win系统cmd可能不支持sudo，去掉sudo问题解决

    执行成功后hexo-blog目录会增加一个模块

    • node_modules：关联保存了将会使用到的hexo依赖包

四. 配置博客

（1）Hexo配置：

根目录下修改配置文件 _config.yml ，主要是对Hexo的配置以及站点的配置：

  1. 站点配置：

    1
    2
    3
    4
    5
    6
    7
    # Site
    title: cy的美好生活    # 网站标题
    subtitle: life is beautiful like sunshine!    # 网站子标题
    description: 这是一个利用Hexo搭建的博客    # 网站描述
    author:  sihai   # 网站作者，也就是您的名字
    language: zh-CN   # 网站使用的语言,这需要注意：看你的主题文件下的language包下有什么语言包就些什么。后面详细说明！        
    timezone:         # 网站时区。Hexo 预设使用您电脑的时区。

  2. 网址配置：一般根据情况修改url和root即可

    1
    2
    3
    4
    5
    # URL
    url: http://OUYANGISHAI.github.io       # 博客网址
     root: /                                # 网站根目录
    permalink: :year/:month/:day/:title/    # 文章的永久链接格式 :year/:month/:day/:title/
    permalink_defaults:                     # 永久链接中各部分的默认值

    如果你的网站存放在子目录中，例如 http://ouyangsihai.github.io/blog, 则将url设为 http://ouyangsihai.github.io/blog， 并且把 root 设为/blog/。

  3. 目录配置：这个地方一般直接取默认值不用修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Directory
    source_dir: source         # 资源文件夹，这个文件夹用来存放内容，例如我们用markdown编写的博文
    public_dir: public         # 公共文件夹，这个文件夹用于存放生成的静态博客文件。
    tag_dir: tags              # 标签文件夹
    archive_dir: archives      # 归档文件夹
    category_dir: categories   # 分类文件夹
    code_dir: downloads/code   # Include code 文件夹
    i18n_dir: :lang            # 国际化（i18n）文件夹
    skip_render:               # 跳过指定文件的渲染，您可使用 glob 来配置路径。

  4. 文章配置：这个地方一般直接取默认值不用修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # Writing
    new_post_name: :title.md    # 新文章的文件名称
    default_layout: post        # 预设布局
    titlecase: false            # 把标题转换为 titlecase（titlecase指的是将每个单词首字母转换成大写）
    external_link: true         # 在新标签中打开链接
    filename_case: 0            # 把文件名称转换为 (1) 小写或 (2) 大写, 0表示不变
    render_drafts: false        # 显示草稿
    post_asset_folder: false    # 启动 Asset 文件夹
    relative_link: false        # 把链接改为与根目录的相对位址
    future: true                # 显示未来的文章
    highlight:                  # 代码块的设置
      enable: true              
      line_number: true         # 是否显示行号
      auto_detect: true         # 是否自动监测
      tab_replace:              # 将 tab 替换成其他字符串

  5. 分类和标签配置：这个地方一般直接取默认值不用修改。

    1
    2
    3
    4
    # Category & Tag
     default_category: uncategorized    # 默认分类, uncategorized表示未分类
     category_map:                      # 分类别名
     tag_map:                           # 标签别名

  6. 日期以及时间格式配置：

    Hexo 使用 Moment.js 来解析和现实时间，一般我们直接取默认值不用修改。如果你想修改的话，可以按照 http://momentjs.com/docs/#/displaying/format/ 中定义的格式进行修改。

    1
    2
    date_format: YYYY-MM-DD           # 日期格式
    time_format: HH:mm:ss             # 时间格式

  7. 分页配置：这个地方一般根据自己的需求修改 per_page 设置每页显示的文章数量即可。

    1
    2
    3
    # Pagination
     per_page: 10                      # 每页显示的文章量，如果设置值为0，则表示禁止分野
     pagination_dir: page              # 分页目录

  8. 主题配置：一般从这里开始，都是属于Hexo拓展插件的配置了，下面这段是配置我们博客所要使用的主题名字，想要获取更多的主题，可以参考：http://hexo.io/themes/

    1
    2
    # Extensions
     theme: landscape    # 主题设置，默认是 landscape

  9. 部署配置：这一块涉及到博客发布，将在下一篇博文中统一进行讲解，这里可以先不用修改配置

    1
    2
    3
    # Deployment
     deploy:
       type:     # 设置发布类型，如git，rsync

（2）主题配置：

配置 themes/{主题名称}/_config.yml 文件，主要是网站主题的配置，如需要显示的菜单，开启的组件等：

  1. 菜单配置：这里主要是对博客显示的菜单项的访问路径进行配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || home #首页
      categories: /categories/ || th #分类
      archives: /archives/ || archive #归档
      tags: /tags/ || tags #标签
      about: /about/ || user #关于
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

  2. 显示内容配置：这里主要对博客显示的内容进行设置，比如查看全文的按钮文本显示。

    1
    2
    3
    # Content
     excerpt_link: 阅读全文    # 设置查看全文的按钮显示文本
     fancybox: true           # 是否开启弹出层效果

  3. 侧边栏配置：主要是对侧边栏展现进行设置。

    1
    2
    3
    4
    5
    6
    7
    8
    # Sidebar
    sidebar: right    # 侧边栏展示的方向
    widgets:          # 侧边栏添加的组件配置
    - category        # 显示分类
    - tag             # 显示标签
    - tagcloud        # 显示标签云
    - archive         # 显示归档
    - recent_posts    # 显示最近发布

  4. 其他配置：第1点 和 第2点 都是大部分主题通用的配置，下面这些就是比较定制化的了。除了下面列出的，国内大部分主题都还会添加了百度统计的ID配置、多说的ID配置、Jiathis分享活着百度分享的配置等等。

    1
    2
    3
    4
    5
    6
    7
    # Miscellaneous
    google_analytics: "UA-********-1"    # 谷歌统计的ID配置，如果你没有用到，可以为空
    favicon: /favicon.png                # 网站图标路径
    twitter:                             # twitter配置
    google_plus:                         # google plus 配置
    fb_admins:                           # facebook 配置
    fb_app_id:

五. 创建博文

  1. 进入博客的根目录，执行下列命令生成新的博文,执行后出现BUG：

    修改了一些地方后成功通过：

    1
    $ hexo new hello-hexo # 格式：hexo new {文章名}

若命令执行成功，source/_posts 目录下多一个 hello-hexo.md 文件，即日志Markdown文件，文件对应格式：

  • title : 文章的标题
  • date : 该文章的创建时间
  • tags : 该文章的标记tag

六. 部署项目

6.1 浏览博客效果

打开Git终端，在blog目录下执行以下命令

$ hexo s #等价于hexo server

若执行成功，会输出：

记住就算换行也要补一个空格

6.2 配置GitHub

  1. 测试终端是否存在 SSH key ：

    1
    $ ls -al ~/.ssh

    结果如图则表示没有配置 SSH key ，若配置key可跳过下个步骤：

  1. 生成 SSH key ，注意大小写：

    1
    $ ssh-keygen -t rsa -b 4096 -C “XXXX@XX.com”

  1. 添加 SSH key 到 ssh-agent 中：

    1
    2
    $ eval "$(ssh-agent -s)"
    $ ssh-add ~/.ssh/id-rsa

  1. 复制 SSH key 到本地：

    1
    $ pbcopy < ~/.ssh/id_rsa.pub

    若不支持pbcopy命令，使用cat命令读取到终端，再复制key

    1
    2
    $ cat < ~/.ssh/id_rsa.pub
    ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCz5dShvsj2rB6FS42kwSR5H+UXMVHgrUIuAkWfRyAM45PxGGEifax84N7oSIct9OIb6OcYAAb7I/t9U6kQDIB830xjQ/lp+LzW6XMDGBVBsGh8TUKkPvshErOJPSShMAPIFwSroNyW4+VYh9/c/JiNbNUXy2grfmwkgPKAYURD5xhQ2ZpvpikB0X/rz8M8VBNeedUj9ZW9hv3RV89R50776PzkmbXMgB39B4bnfUjx2M0dji+Ic+Tud1XoXflYrdwQz7HC2apHHG8gx2NOi8Y/K7+mFGVodSfKinoMGTHvppKieCeveNtzxo/1YwFSm63nkFBixe7VHOoLuY+3Rfjp7GVxRQMmg32pu+JW3lBX2e0ebXsWDqVNPBTF9DwAKrTvrkMsEjwiOEYjWlqTgK7ozsaSkGIIoWRglviu6Drqu7JtVb7EfvGdzRo3AnNJ2DeRo7ipRKaTRw8+cJa+Npfuh6u0yQHv8tgxfuVM3j7yUwG3OOlcsY4mVLU7nXcKXBp7uOTOMBH0Kjig6D3tLEDOqI8cpxERXnJw9QbuCvLFaYHjlSCzIIvixJ0xoizMCiyJFXS4yWVYeqGggcrqrdIIz1H9n0MGSbyxCMFxVhHP1jvrxounoyyfgvXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/jikaYsWmw== 'linyishui168@outlook.com'

  2. 将复制的SSH key添加到GitHub中。

  3. 执行命令测试是否添加成功。

    1
    $ ssh -T git@github.com

  1. 创建一个Repository托管博客：

6.3 配置Hexo部署到GitHub

Hexo提供了 hexo-deployer-git 组件方便部署到GitHub：

  1. 配置Deploy插件-根目录 _config.yml 文件。

    1
    2
    3
    4
    5
    6
     # Deployment
    deploy:
      type: git                                                    # 设置发布类型，如git
      repository: git@github.com:LAILAIWA/LAILAIWA.github.io.git   # 设置repository对应的链接
      branch: master                                               # 设置提交到的分支
      message: Site update at {{ now("YYYY-MM-DD HH:mm:ss") }}     # 设置我们提交的信息

  2. 发布。

    • 执行命令生成博客的静态页面：

      1
      $ hexo g # 等价于hexo generate

    • 执行命令将静态页面上传到GitHub

      1
      $ hexo d # 等价于hexo deploy

    • 打开浏览器访问LAILAIWA.github.io访问部署的博客，每次添加新的博客，重复执行前两个命令即可
      删除命令，删除已生成的静态页面

      1
      $ hexo clean

    • 执行命令1，出现BUG，发现没在项目路径下执行：

      更换路径，又有BUG，尝试删除链接中的空格，解决：

    • 执行命令2，又有BUG：

    • 应该是插件未部署成功，执行命令：

      1
      npm install hexo-deployer-git --save

    • 又又又出现BUG，应该是Git未登陆：

    • 可以用命令全局登陆：

      1
      2
      git config --global user.email "linyishui168@outlook.com"
      git config --global user.name "LAILAIWA"

      或改项目的配置文件只为当前项目登陆，在项目目录.git文件夹[user]，或在.git文件夹下执行命令：

      1
      git config user.name = "xxx"

    • 又又又有BUG出现：

    • 猜测可能是文件太大，调整一下：

      1
      git config --global http.postBuffer 524288000

      BUG提示变化：

    • 不太明白，又部署了一下，结果成功了…黑人问号脸???

部署成功，尝试访问一下：

访问成功，但字符编码错误，样式也没加载成功，明天解决一下。

记事本保存时编码格式选UTF-8。

一直会出现连接不上Repository情况，可是SSH是配置好的啊？

尝试通过修改hosts的方法解决这个问题，在站长之家找个最快的地址，但不太靠谱，都PING不通，在网上找到一个地址还可以：

192.30.255.112 github.com

解决部署问题，但样式还是没加载出来：

发现项目好像忘建子目录了，尝试修改配置文件，将子目录删除

1
2
url: http://yishui.github.io/blog
root: /blog/

修改为

1
2
url: http://yishui.github.io
root: /

终于成功了！

接下来把默认的主题换个好看点的。

七. 配置nexT主题

首先在项目根目录，打开命令行，执行以下指令，将主题部署到项目内：

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

打开根目录配置文件，将主题换为next。

theme: next

本地查看一下效果，发现4000端口被占用，查看端口情况：

1
netstat -o -n -a | findstr :4000

干掉占用的进程。

1
taskkill /F /PID 7532

或者指定其他端口。

1
$ hexo s -p 5000

部署后查看以下效果：

参考：

🔗 Hexo+nexT主题搭建个人博客

🔗 nexT主题配置

🔗 nexT官方文档

相关文章