Hexo博客搭建流程与注意事项

发表于 | 分类于

搭建流程

在GitHub上创建项目的名称必须与你的github用户名相同，比如用户名为qinyin-yq，系统名必须为：qinyin-yq.github.io，即《系统名.github.io》

安装Hexo：npm install -g hexo-cli
安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init myBlog
cd myBlog
npm install

新建完成后，指定文件夹的目录如下：
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。
├── package.json
├── scaffolds # 模版文件夹
├── source # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
| ├── _drafts # 草稿文件
| └── _posts # 文章Markdowm文件
└── themes # 主题文件夹

之后将Hexo与github两个关联起来：

  1. 打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：

    1
    2
    3
    4
    5
    deploy:
      type: git
      repo:
    	github: https://github.com/qinyin-yq/qinyin-yq.github.io.git
      branch: master

  2. 要安装一个部署插件 hexo-deployer-git：

    npm install hexo-deployer-git --save

  3. 在本地修改项目后，要更新到github Page上时，应该现在本地测试看效果：

    hexo server (或 hexo s)

    然后部署上线：g 是 generate 缩写，d 是 deploy 缩写

    hexo clean    //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g    //（本地生成静态文件）
hexo d     //（将本地静态文件推送至Github）

  4. draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以：hexo new draft newpage。这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用：hexo server --draft。然后在本地端口中开启服务预览。
    如果你的草稿文件写完了，想要发表到post中：hexo publish draft newpage就会自动把newpage.md发送到post中。

还有另外一种方式：

直接在github上新建项目qinyin，然后在项目上创建html页面，比如index.html页面，然后在setting>GitHub Pages>Source>选择需要关联的分支，然后就 https://qinyin-yq.github.io/qinyin（项目名）/index.html（html页面名） 可以访问了，然后通过index.html上的页面按钮跳转到其他页面（这种方式没有深入实践不清楚可行性）

样式修改

  • next的主题修改（比如头部Home的地址，图标等）在..\themes\next\_config.yml文件中menu属性修改， 而底部是否显示主题样式、地址与版本号，则是footer:属性中修改，而博客的更新时间是updated_at这个属性决定。
  • 首页的内容是在..\source\_posts\hello-world.md文件中修改
  • 博客中的英文转中文，比如：Posted on是根据在..\_config.yml文件中language属性指定何种语言格式来确定的。英文对应于en，中文对应zh-Hans。包括其他例如“首页”“标签”等同理。
  • 菜单与侧边栏的英文替换中文是在对应的.yml文件中修改（中文对应的是zh-Hans.yml）而指定使用哪个.yml文件是在..\_config.yml文件中language属性指定（language: zh-Hans）
  • 侧边栏目录添加序号问题：在新增博客内容时，自己在内容中有编号，但next默认又会给我们添加一次编号，导致编号重复。
      解决方法：关闭next自带的添加编号功能：在..\themes\next\_config.yml文件中toc.number属性设置
  • 头像设置：在..\themes\next\_config.yml文件中avatar属性修改，指定头像图片的路径，相对路径是在当前主题，即..\themes\next\source目录下。也可以使用绝对路径
  • 修改”发表于2020-04-08|分类于 Spring”下的margin-bottom过大的样式：..\themes\next\source\css\_common\components\post\post-meta.styl文件中.posts-expand .post-meta{}属性
  • 修改h1-7 标题中的间距问题：..\themes\next\source\css\_common\components\post\post-expand.styl文件中h2, h3, h4, h5, h6{}属性删除了：padding-top: 10px;
  • 修改代码块<figure>标签上下间距：..\themes\next\source\css\_common\components\highlight\highlight.styl文件code-block属性：margin: 10px 0;
  • 修改博客与博客之间的间距过大，即横线的上下间距过大的样式：..\themes\next\source\css\_variables\base.styl中的：
    1
    2
    $post-eof-margin-top          = 80px  //  or 160px for more white space
    $post-eof-margin-bottom       = 60px  //  or 120px for less white space
  • 修改图片与文字之间的间隔过大：..\themes\next\source\css\_common\components\post\post-expand.styl文件
    1
    .posts-expand .post-body .fancybox img { margin: 0 auto 5px; }
  • 修改

    标签的样式..\themes\next\source\css\_common\scaffolding\base.styl文件

    1
    p { margin: 0 0 0 0; }

标签类别管理

  • 创建标签
    创建标签页面：hexo new page tags
  • 创建分类
    创建分类页面：hexo new page categories

博客内容引入图片

将图片放在..\themes\next\source\images目录下，然后在博客的内容中，通过

1
![](/images/xxxx.jpg)

格式引入本地图片。

相关链接

Markdown在线编辑器
hexo史上最全搭建教程
GitHub——GitHub Pages+Hexo 搭建独立博客的优化
hexo + github pages搭建博客样式加载不出来+url的配置问题
仓库主页