利用Hexo和Github搭建个人博客
写在前面
大一萌新一枚,想学点技术写一个自己的博客,记录自己的点滴。能力有限,又总要写点什么,那就写一下这次创建blog的心酸经历
准备工具
- 首先要有一个Github账号,创建一个Reposity(库),name为username.github.io,其中username必须为你的Github账号名,否则你建立的库只会在Pages下的目录,并不是主页,个人觉得是github官方的限制,总不可能让你无限制的拥有创建主页面域名。
- 需要安装Git,emmm..如果你不知道什么是Git
- 需要安装Node.js
- 需要安装Hexo,hexo是一款基于Node.js的静态博客框架,就是说我们可以通过hexo创建我们的博文,将md文件转换成静态文件,再部署到Github上;Hexo可以在安装了Node.js之后通过npm安装:
笔者是在cmd下运行的npm,但看到网上的方法说最好打开Git bash运行安装$ npm install hexo-cli -g
根目录初始化
- 首先创建一个文件夹,名字最好为uername.github.io(便与管理站点)。文件夹用来存放Hexo的配置文件
- 命令行Cd到该文件夹下,或者右键git bash,执行命令:
$hexo init
- 安装依赖包:
此时该文件夹下会多出来很多文件,目录如下:$nmp install
即为Hexo的配置文件. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes
安装上传插件 hexo-deployer-git
这个插件支持本地修改上传到Github$ npm install hexo-deployer-git --save
布置自己的网站
Clone一个你喜欢的骚主题到文件夹
- 这里笔者用的是Next,通过Git命令执行的github克隆:
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 需要一定的时间,克隆后的文件夹名为next,在themes目录下
- 其中,_config.yml是博客页面的配置文件,使用详情左戳
配置主目录
- 打开主目录下_config.yml
- 修改主题,使其指向我们使用的主题
theme:next
- 修改deploy项,与你自己的github相对应
这个deploy信息是hexo-deployer-git插件的工作认证,执行部署操作的时候,首先会自动初始化git仓库(位置在.deploy_git中),并关联到指定repo与branch,后续public文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。若修改了name和email,需要删掉整个.deploy_git再重新部署才会生效以及你的Github账号。deploy: type: git repo: https://github.com/Hpd0ger/Hpd0ger.github.io.git name: Hpdoger email: # 注册Github的邮箱 branch: master
部署到GitHub上
主要有三个步骤: - hexo g:
$hexo generate :将source\_post文件下的md文件转成静态页面到public文件夹下
- hexo s:
$hexo s : 生成本地预览,默认情况下,访问网址为: http://localhost:4000/
- hexo d:
特别注意:$hexo d :将.deploy目录部署到GitHub
$hexo clean :清除缓存文件(db.json)和已生成的静态文件(public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
- 现在登陆一下自己的博客,看看有没有成功哦
写博客
创建一篇博文
$hexo new '文章名'
会在source_post文件下创建一个md文件,系统已经为你写好了标题和日期
创建一个页面
$hexo new page "页面名" #如 tages、catagories
创建页面就是在主页上显示你的页面名,即你在博文的开头定义的这篇博文的标签、分类,即属于页面内容
会在source\目录下建立对应名称的文件夹,文件夹下有对应名称的md文件
使用Markdown编辑器
笔者使用的是cmd markdown,由于画面比较小清新所以一直使用,如果你氪金的话还可以将md文件转化为pdf格式。
Markdown语法介绍
- 这里有一篇不错的博文介绍了一下用法,个人觉得还不错链接
- 值得注意的就是标题的套用
- 对于hexo,有两种方式:
使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称。
使用图床,地址将图片拖入区域中,会生成图片的URL,这就是链接地址。
第一种没有成功,笔者一直用的第二种
写在最后
这是笔者的第一篇博文,参考了一些google的资料。写博客目的只是为了能够提高自己,把自己所见所学写下来,比如这次博客的搭建,就花费了好多时间。最近还要忙着考四级和转专业,希望院里面的申请能通过。文采有限,希望有不对或者不好的地方可以反馈给我,接下来的阶段会闭关修炼一阵子,传一下ctf题或者sql注入绕过的博文吧。
未来的路还有很长,希望自己可以一直走下去