Hpdoger's Blog.

利用Hexo和Github搭建个人博客

Word count: 1,330 / Reading time: 5 min
2018/05/26 Share

写在前面

大一萌新一枚,想学点技术写一个自己的博客,记录自己的点滴。能力有限,又总要写点什么,那就写一下这次创建blog的心酸经历

准备工具

  1. 首先要有一个Github账号,创建一个Reposity(库),name为username.github.io,其中username必须为你的Github账号名,否则你建立的库只会在Pages下的目录,并不是主页,个人觉得是github官方的限制,总不可能让你无限制的拥有创建主页面域名。
  2. 需要安装Git,emmm..如果你不知道什么是Git
  3. 需要安装Node.js
  4. 需要安装Hexo,hexo是一款基于Node.js的静态博客框架,就是说我们可以通过hexo创建我们的博文,将md文件转换成静态文件,再部署到Github上;Hexo可以在安装了Node.js之后通过npm安装:
    1
    $ npm install hexo-cli -g

笔者是在cmd下运行的npm,但看到网上的方法说最好打开Git bash运行安装

根目录初始化

  1. 首先创建一个文件夹,名字最好为uername.github.io(便与管理站点)。文件夹用来存放Hexo的配置文件
  2. 命令行Cd到该文件夹下,或者右键git bash,执行命令:

    1
    $hexo init
  3. 安装依赖包:

    1
    $nmp install

此时该文件夹下会多出来很多文件,目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

即为Hexo的配置文件

安装上传插件 hexo-deployer-git

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

这个插件支持本地修改上传到Github

布置自己的网站

Clone一个你喜欢的骚主题到文件夹

  • 这里笔者用的是Next,通过Git命令执行的github克隆:

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 需要一定的时间,克隆后的文件夹名为next,在themes目录下
    avatar

  • 其中,_config.yml是博客页面的配置文件,使用详情左戳

配置主目录

  • 打开主目录下_config.yml
  1. 修改主题,使其指向我们使用的主题

    1
    theme:next
  2. 修改deploy项,与你自己的github相对应

    1
    2
    3
    4
    5
    6
    deploy:
    type: git
    repo: https://github.com/Hpd0ger/Hpd0ger.github.io.git
    name: Hpdoger
    email: # 注册Github的邮箱
    branch: master

这个deploy信息是hexo-deployer-git插件的工作认证,执行部署操作的时候,首先会自动初始化git仓库(位置在.deploy_git中),并关联到指定repo与branch,后续public文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。若修改了name和email,需要删掉整个.deploy_git再重新部署才会生效以及你的Github账号。

部署到GitHub上

主要有三个步骤:

  1. hexo g:

    1
    $hexo generate :将source\_post文件下的md文件转成静态页面到public文件夹下
  2. hexo s:

    1
    $hexo s : 生成本地预览,默认情况下,访问网址为: http://localhost:4000/
  3. hexo d:

    1
    $hexo d  :将.deploy目录部署到GitHub

    特别注意:

    1
    $hexo clean :清除缓存文件(db.json)和已生成的静态文件(public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
  4. 现在登陆一下自己的博客,看看有没有成功哦

写博客

创建一篇博文

1
$hexo new '文章名'

会在source_post文件下创建一个md文件,系统已经为你写好了标题和日期

创建一个页面

1
$hexo new page "页面名" #如 tages、catagories

创建页面就是在主页上显示你的页面名,即你在博文的开头定义的这篇博文的标签、分类,即属于页面内容
会在source\目录下建立对应名称的文件夹,文件夹下有对应名称的md文件

使用Markdown编辑器

笔者使用的是cmd markdown,由于画面比较小清新所以一直使用,如果你氪金的话还可以将md文件转化为pdf格式。

Markdown语法介绍

  • 这里有一篇不错的博文介绍了一下用法,个人觉得还不错链接
  • 值得注意的就是标题的套用
  • 对于hexo,有两种方式:
    使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称。
    使用图床,地址将图片拖入区域中,会生成图片的URL,这就是链接地址。
    第一种没有成功,笔者一直用的第二种

写在最后

这是笔者的第一篇博文,参考了一些google的资料。写博客目的只是为了能够提高自己,把自己所见所学写下来,比如这次博客的搭建,就花费了好多时间。最近还要忙着考四级和转专业,希望院里面的申请能通过。文采有限,希望有不对或者不好的地方可以反馈给我,接下来的阶段会闭关修炼一阵子,传一下ctf题或者sql注入绕过的博文吧。

未来的路还有很长,希望自己可以一直走下去

CATALOG
  1. 1. 写在前面
  2. 2. 准备工具
  3. 3. 根目录初始化
  4. 4. 安装上传插件 hexo-deployer-git
  • 布置自己的网站
    1. 1. Clone一个你喜欢的骚主题到文件夹
    2. 2. 配置主目录
    3. 3. 部署到GitHub上
  • 写博客
    1. 1. 创建一篇博文
    2. 2. 创建一个页面
    3. 3. 使用Markdown编辑器
    4. 4. Markdown语法介绍
  • 写在最后