3

GithubPages+Hexo搭建个人博客记录

 2 years ago
source link: https://drrany.github.io/GithubPages+Hexo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

记录一下简单流程和出现的问题。

本文基本上是一个基本步骤的记录，没有太多的讲解，如果希望了解更多原理性知识，推荐阅读文章末尾的链接。

提示：部分网上很多的安装教程基本都进行了简略，以后闲的话可能会补一下（flag插好_(:з」∠)_）

一、环境搭建

首先明确需求：

  • 服务器：GitHub Pages

  • 博客框架：Hexo

因此要做的准备有如下：

1. 准备GitHub Pages

  1. 安装 git
    通过 $ git --version 测试是否安装成功。
  2. 注册GitHub账户并配置SSH key
  3. 在GitHub上开启GitHub pages服务（其实就是创建一个仓库，仓库的名字必须是 username.github.io）
    到这步可以测试一下：在浏览器输入 https://username.github.io 能否访问成功

2. 准备Hexo

  1. 安装 node.js
    通过 $ node --version 测试是否安装成功。

  2. 通过npm安装 Hexo，终端输入命令：

    $ npm install -g hexo-cli

  3. 创建站点根目录（站点根目录中的文件就是我们博客所需的资源）：
    Hexo会在指定的这个站点根目录中创建所需要的文件

    $ hexo init <指定目录>
$ cd <指定目录>
$ npm install

  4. 预览博客：输入 $ hexo server 。浏览器访问 http://localhost:4000/ 即可看到当前根目录对应的博客资源

  5. 根据站点根目录内容生成静态文件：输入 $ hexo generate。生成的文件位于 /public/ 文件夹中，下一步就需要将生成的静态文件上传到GitHub仓库中

2.1 站点目录结构分析

  • .deploy_git：hexo g 生成

  • node_modules/：安装包的目录，执行 npm install 的时候会重新生成

  • scaffolds/：文章的布局

    • 当创建新的文章时，Hexo会根据scaffold里的不同布局来建立文件，默认布局由 _config.yml 中的 default_layout 参数指定。

    • 不同布局创建的文章保存路径有所区别：

      布局 路径

      post source/_post

      page source/

      draft source/_draft

      自定义 source/_post

  • source：博客文章的.md文件。除\_post文件夹外，开头以_（下划线）命名的文件/文件夹或隐藏文件都会在generate时被忽略。

  • themes/：主题文件夹

  • .gitignore：限定在push时哪些文件可以忽略

  • _config.yml：站点的配置文件。配置参数参考：Hexo配置参数说明

  • db.json：hexo g 生成的文件

  • package.json：应用程序信息，包括hexo的版本信息和所有安装的依赖

  • .git/：标志这是一个git项目

  • public：hexo g 生成的静态网页

总结下，需要备份的文件有：scaffolds/、source、themes/、_config.yml、package.json、.gitignore

2.2 Hexo指令参考

$ hexo init [folder]

  • 新建一个网站根目录，进行初始化。

$ hexo clean

  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)。如果发现对站点的更改无法生效，可能需要运行该命令。

$ hexo new [layout] <title>

  • 新建一篇文章，标题含有空格的话需要用单/双引号括起来。
  • layout：文章布局。默认由 _config.yml 中的 default_layout 参数指定
  • 参数：
    • -p, –path 自定义新文章的路径（默认情况下会解析标题来确定路径）
    • -r, –replace 如果存在同名文章，将其替换
    • -s, –slug 文章的 Slug，作为新文章的文件名和发布后的 URL

$ hexo generate/g

  • 生成静态文件。（将souce文件夹下的Markdown和HTML文件解析到了public文件夹下）

    • -d, –deploy 文件生成后立即部署网站

    • -w, –watch 监视文件变动

    • -b, –bail 生成过程中如果发生任何未处理的异常则抛出异常

    • -f, –force 强制重新生成文件。使用该参数的效果接近 hexo clean && hexo generate

    • -c, –concurrency 最大同时生成文件的数量，默认无限制

$ hexo publish [layout] <filename>

  • 发表草稿。草稿默认不会显示在页面中。

$ hexo server/s

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

    • -p, –port 重设端口
    • -s, –static 只使用静态文件
    • -l, –log 启动日记记录，使用覆盖记录格式

$ hexo deploy/d

  • 部署网站。（将本地资源部署到服务器，我这里也就是GithubPages中）
  • 参数：-g, –generate 部署之前预先生成静态文件

$ hexo render <file1> [file2] ...

  • 渲染文件。
  • 参数：-o, –output 设置输出路径

$ hexo migrate <type>

  • 从其他博客系统迁移内容。可从RSS、Jekyll、Octopress、WordPress、Joomla中迁移，具体参考 博客迁移

选项：

$ hexo --safe

  • 安全模式。不会载入插件和脚本。在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

$ hexo --debug

  • 调试模式。在终端中显示调试信息并记录到 debug.log。

$ hexo --silent

  • 简洁模式。隐藏终端信息。

$ hexo --draft

  • 显示 source/_drafts 文件夹中的草稿文章。

$ hexo --cwd /path/to/cwd

  • 自定义当前工作目录（Current working directory）的路径。

3. 将静态文件部署到对应的仓库中

  1. 打开站点根目录中的 _config.yml 文件，找到deploy字段（在最下面），将其用以下内容替换：

    deploy:
  type: git
  repo: [email protected]:username/username.github.io.git
  branch: master

  2. 安装插件（注意要在站点根目录下执行该操作）：$ npm install hexo-deployer-git --save

  3. 部署： $ hexo deploy（建议执行该步前先 $ hexo clean）

二、内容管理

博客发布的内容都位于 source/_post/ 文件夹中。

  1. 创建新文章：$ hexo new 'title'
  2. 创建成功后会发现 source/_post/ 中多了一篇相同标题的.md文件，打开该文件编辑即可
  3. 编辑完成发布：$ hexo g -d

也可以在source/_post/目录下手动创建.md文件，但这时就需要你自己手动复制一下poster：

---
title: 
date: 
tags: 
categories: 
---

删除文件则直接在文件夹内手动删除然后重新部署就好了。

三、主题修改

我本人使用的是 landscape 主题，不过你可以挑选任何你喜欢的主题主题商城，我这里建议使用 NexT 主题，因为它的各方面插件都比较完善不需要费太多时间。

修改主题步骤：

  1. 下载主题文件夹到/themes/目录下
  2. 修改站点配置文件中的theme字段，e.g. 
    theme: landscape

四、检索配置

1. 配置sitemap文件

  1. 在站点根目录下输入以下命令：

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

  2. 在站点根目录的配置文件_cpnfig.yml中添加：

    # sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

  3. 执行：$ hexo g
    public文件夹下多了 sitemap.xml 和 baidusitemap.xml 两个文件，这就是供搜索Google和百度引擎爬虫抓取的站点地图。

2. Google站点验证

  1. 进入 Google站点管理工具 ，选择网址前缀，在网址中输入你的博客地址。
  2. 下载HTML文件，将文件放到站点根目录下的 /public 文件夹中
  3. 执行 $ hexo d
  4. 等待一分钟左右，返回Google页面点击验证
  5. 验证成功后再次回到 Google站点管理工具 。在右侧工具栏中找到 站点地图 选项。
  6. 在界面中输入 sitemap的存放路径。因为public为站点的实际根目录，所以输入的是 sitemap.xml
  7. 等待一段时间即可通过Google检索到

注意这里Google会先显示站点地图无法获取，但其实后台已经在处理了，大概等1~2天就能检索到。

3. 百度站点验证

参考：https://www.cnblogs.com/lfri/p/12219639.html

五、遇到的问题＆总结

  1. 频繁在修改网站资源需要预览时使用 hexo s 先在本地调试，直接部署的话太慢了，刷新记得 ctrl+F5
  2. 如果用vscode编辑配置文件，要进行部署的时候记得在vscode把文件先关闭，不然会报错

参考链接：

https://sketchk.xyz/2017/03/24/A-Guide-Of-Making-Your-Personal-Blog-Part-1/

https://juejin.im/post/6844904131266609165#heading-18


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK