使用Hexo+Github搭建个人博客

Melonwith
901 阅读4分钟

为什么要搭建个人博客

对于初入编程这一领域的新手而言，拥有一个自己的技术博客是非常有价值的。一来可以记录自己的学习心得，总结自己的学习经验，强化自己在学习过程中对新知识、新技术的理解；二来可以分享自己的学习博客给其他入门的小伙伴，帮助更多的新手避免踩坑，毕竟初入编程领域，如果有同路的学习者予以分享相关的心得经验，新手就能够有“法”可循，从而更加高效地入门，同时我们也能为友好的编程学习环境贡献自己的那份力量。

如何简单高效地搭建一个属于自己的博客

其实网上已经有很多可以搭建自己个人博客的平台，比如知乎、掘金、简书等，都可书写博客。不过呢，今天我是想给大家分享一下，如何利用Hexo+Github搭建一个属于自己的个人博客。

Hexo简介

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

想了解Hexo戳这里哟

准备工具

  • windows7或者mac
  • 申请一个Github账号
  • 安装GitBash
  • 安装Node.js以及NPM

搭建步骤

  1. 登陆你的Github账号，新建一个空repo(也就是只需要填写仓库名称，然后点击保存即可)，repo名称可以是 myBlog.github.io
  2. 刷新Github界面，进入 myBlog.github.io 对应的 repo，点击页面的setting ，打开 GitHub Pages 功能，如果已经打开了，设置预览链接
  3. 通过GitBash进入命令行,选择一个合适的目录，比如cd ~/Desktop
  4. 新建文件夹 mkdir myBlog
  5. 安装Hexo npm install -g hexo-cli，然后初始化 hexo init myBlog
  6. 进入你新建的文件夹 cd myBlog，然后使用npm初始化命令 npm i，接下来默认回车即可
  7. 通过以上命令，此时你可以看到 myBlog 的文件结构已经变成了这样：
    。
  8. 现在你需要编辑一下你的个人博客配置 start _config.yml
    1. 把第 6 行的 title 改成你想要的名字，这将显示成你站点的名字
    2. 把第 9 行的 author 改成你的姓名或者昵称
    3. 把最后一行的 type 改成 type: git
    4. 在最后一行后面新增一行，左边与 type 平齐，加上一行 repo: 仓库地址 （请将仓库地址改为「myBlog.github.io」对应的仓库地址，仓库地址以 git@github.com: 开头）
  9. 安装 git 部署插件 npm install hexo-deployer-git --save

至此，Hexo的安装配置都已完成，接下来试试Hexo的写博客功能吧

如何生成博客

  1. 你可以执行下列命令来创建一篇新文章 hexo new 第一篇博客,然后命令行终端会显示一个md文件的路径
  2. start xxxxx.md,其中xxxxx.md为上一个步骤的md文件路径,而且如果你是Windows用户的话，路径中的/需要变成\
  3. 使用触发器命令，hexo generate，快速生成静态文件
  4. 使用部署命令，hexo deploy，让 Hexo 在生成博客后部署网站
  5. 当然，你也可将3、4两个步骤中的命令结合在一起使用，hexo generate --deploy or hexo deploy --generate,效果同3、4步骤。
  6. 现在你可以去你的 myBlog.github.io 仓库主页，查看你的个人博客了以及第一篇博文了
  7. 如果继续写博客，以上步骤再次执行一遍即可
  8. Hexo搭建的个人博客，我的界面如下：

如何换主题

  1. https://github.com/hexojs/hexo/wiki/Themes 主题集合
  2. 复制它的 SSH 地址或 HTTPS 地址，假设地址为 git@github.com:iissnan/hexo-theme-next.git
  3. 进入 myBlog的主题文件夹，cd myBlog/themes
  4. git clone git@github.com:iissnan/hexo-theme-next.git
  5. cd ..
  6. 将 _config.yml 的第 75 行改为 theme: hexo-theme-next，保存
  7. hexo generate --deploy
  8. Wait a minute,刷新博客主页，就能看到主题更换了

Hexo样式缺失的问题

在使用Hexo生成博文的过程中，发现了一个很大的问题，那就是可能会出现Hexo的CSS样式丢失，就只剩下文字部分，非常地难看。

通过Google以及查阅Hexo文档得知，需要在_config.yml中两个地方进行改动：

  1. 把 15 行的 url 改成htpps开头的仓库名,比如我的是https://github.com/WjmNightingale/wjmBlog.github.io.git
  2. 把 16 行的 root 改成 /myBlog.github.io/即/你的项目仓库名/
  3. 然后重新部署 hexo generate --deploy

以上就是利用Hexo+Github搭建个人博客的要点，如果对你有帮助，可以点个喜欢，当然更希望你看完后亲自去尝试一下！

avatar
文章
阅读
粉丝