技术干货饥人谷技术博客程序员的日常

使用 Hexo 和 GitHub Pages 搭建简单的个人博客

2019-06-01  本文已影响149人  你看到我的小熊了吗

闲来无事,趁着摸鱼时间,使用HexoGitHub搭建出最简单的个人博客。
毕竟磨蹭了很久了,苦于自己的技术水平不够,加上日常懒癌发作,终终终于找到了最简单又免费的方式来搭建个人博客,顺带撸出自己的第一个博文。
下面就让我们愉(tong)快(ku)的开始吧!

准备工作

环境

先安装好以下应用程序:

安装过程不再赘述,可自行度娘,安装完毕后,使用npm即可完成Hexo的安装。

$ npm install -g hexo-cli

GitHub

注册并登陆好 GitHub 账户

Hexo

创建你的项目

在控制台执行以下命令

$ hexo init <folder>

如果你的电脑安装了yarn,执行该脚本后,会自动为你安装依赖(即执行yarn install),否则你还需执行以下命令

$ cd <folder>
$ npm install

至此,你的本地博客已经建立成功,只需要运行

$ hexo server

并在浏览器上输入地址 localhost:4000 便可预览初始化的博客内容。

GitHub

创建自己的仓库

进入你的 GitHub 主页,创建一个新的repository
并输入对应的Repository name,请注意:必须保持格式<username>.github.io,其中<username>替换成你的 GitHub 账户名,例如:lostimever.github.io

create.jpg

点击Create repository即可。

将本地博客上传至GitHub

修改本地文件

打开之前新建的hexo文件夹,在根目录下有个_config.yml文件,用文本编辑器打开,在最下面找到deploy,修改为:

deploy:
  type: git
  repository: http://github.com/<username>/<username>.github.io.git
  branch: master

<username>替换成你的 GitHub 账户名,并保存即可。

开始部署

在命令行中输入:

$ hexo g
$ hexo d

当命令行中显示:
INFO Deploy done: git
说明部署成功。打开浏览器在地址栏中输入lostimever.github.io(将lostimever改成自己的),就能看见自己的博客了,别人也可以访问。

可能出现的问题

报错:ERROR Deployer not found: git

在命令行中输入
npm install hexo-deployer-git --save

yarn add hexo-deployer-git
重新执行

$ hexo g
$ hexo d

*注意: 笔者安装的hexo的版本为

 hexo: 3.8.0
 hexo-cli: 2.0.0

不同的版本之间的配置可能有些许不同,注意查看自己的版本。

写博客文章

创建新的文章

在命令行中输入:hexo new “name”(将name替换成你的文章的标题),
然后在source/_posts/里就能看到名为name.md的文件了,现在就可以愉快的写博(tu)客(cao)啦。
也可以直接在source/_posts/里直接新建一个名为name.md的文件,注意开头需加入以下内容:

---
  title: name
  date: 2019-05-31 21:57:27
  tags:
---

文章中如何插入图片

Hexo插入图片的方式很多,这里只介绍一种:将图片放在当前文章的目录中。文章的目录可以通过配置_config.yml来生成。

post_asset_folder: true

_config.yml文件中的配置项post_asset_folder设为true后,执行命令$ hexo new "name",在source/_posts中会生成文章name.md和同名文件夹name。将图片资源放在name中,文章就可以引用图片资源了。

{% asset_img image.jpg document name %}

发表文章

写好文章并保存后,重复 开始部署 中的操作即可。

结束

建博一时爽,更新如难产。

参考

上一篇下一篇

猜你喜欢

热点阅读