用Github Page+Hexo搭建个人炫酷博客(基础篇)

一直想搭建一个自己的博客,刚好之前也在学习使用Node.js和Git,看了看所以决定使用Github Page+Hexo搭建,这篇文章就记录自己的搭建过程辣,方便以后进行知识回顾()。


准备工作

使用Github Page+Hexo搭建博客,需要进行以下准备工作。

  • 注册自己的Github账号
  • 下载Git
  • 下载Node.js
  • Markdown编辑器

下载以后可以自己先进行一些各个软件基础的使用学习熟悉一下啦。

Hexo

hexo是什么?

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

安装

打开git bash,使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli
在这里插入图片描述

初始化

选择一个盘建立一个博客站点的文件夹,我的是D盘,文件名就叫blog。
我已经进入blog这个文件夹了,执行以下命令

$ hexo init
$ npm install

执行完以上命令后,我的文件夹的目录为
在这里插入图片描述
各个文件夹的作用:

  • node_modules:这个用过nodejs的都知道啦嘿嘿

  • scaffolds:模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

  • source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

  • themes:主题 文件夹。Hexo 会根据主题来生成静态页面。

  • .gitignore:一般来说每个Git项目中都需要一个“.gitignore”文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

  • _config.yml:网站的 配置 信息,您可以在此配置大部分的参数。

  • package.json:应用程序的信息。

hexo初体验

输入以下命令

$ hexo g
$ hexo s

在这里插入图片描述
在这里插入图片描述

然后就可以在你的浏览器输入http://localhost:4000,查看你的博客。
在这里插入图片描述

创建Github仓库并关联

创建时,填写Repository name的时候,Repository name的格式必须为账户名.github.io,,这是GitHub Pages的特殊命名规范。并且需要勾选Initialize this repository with a README。
在这里插入图片描述
复制这个新建仓库的SSH地址
在这里插入图片描述
打开blog文件夹下的_config.yml,我是用sublime打开的,拉倒最下面,修改deploy为以下代码,repository后面的是你的仓库地址。
在这里插入图片描述

如果使用git方式进行部署,执行npm install hexo-deployer-git --save来安装所需的插件!!没有的话会报错的!!!
在这里插入图片描述

输入以下命令部署到Github Page

$ hexo d

然后浏览器输入username.github.io可以看到自己的博客啦!
在这里插入图片描述

hexo命令

$ hexo generate
生成静态文件,简写为$ hexo g
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

$ hexo publish [layout]
发表草稿。

$ hexo server
启动服务器。默认情况下,访问网址为: http://localhost:4000/。
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式

$ hexo deploy
部署网站。
-g, --generate 部署之前预先生成静态文件
该命令可以简写为:$ hexo d

$ hexo render [file2] …
渲染文件。
-o, --output 设置输出路径

$ hexo migrate
从其他博客系统 迁移内容。

$ hexo clean
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

$ hexo --config custom.yml
自定义配置文件的路径,执行后将不再使用 _config.yml。

$ hexo --cwd /path/to/cwd
自定义当前工作目录(Current working directory)的路径。

$ hexo --safe
在安全模式下,不会载入插件和脚本。当您在安装新插件遭遇问题时,可以尝试以安全模式重新执行。

$ hexo list type
列出网站资料。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值