一、项目博客构建
1、新建仓库
在GitHub上创建仓库,建议仓库名称为: 【your_user_name.github.io】;
2、克隆代码
通过命令行进入项目目录,克隆代码,执行命令:
git clone <仓库地址>
3、安装hexo
安装hexo,执行命令行:
npm install -g hexo
4、初始化hexo
初始化hexo,执行命令行:
npm install
5、安装依赖
随后hexo会在目标文件夹自动创建网站所需要的文件,然后按照提示,执行以下命令行:
npm install
6、启动本地服务器
启动网站本地服务器,执行命令行:
hexo server
然后,从浏览器中打开localhost:4000,你就可以看到最初始的你的博客网站了。如果要停止服务,你可以按下Ctrl+C;
7、创建gh-pages分支并将其推送到远端
如果你是为一个项目制作网站,那么需要把branch设置为gh-pages,请执行以下操作:
git branch gh-pages //创建分支
git checkout gh-pages//切换分支
git push origin gh-pages//推动分支到远端
这样做的好处是:主分支用来进行blog源代码管理;gh-pages分支用来作为编译代码的存放位置,而这些东西可以通过.gitgone文件来使得git忽略特定的文件。
同时进入网站设置编译代码的存放位置,如下图所示:

注意:这个时候线上地址是不能看到自己的博客的(可以看到github的404页面),如果我们想将我们的网站呈现在网络上,必须进行发布部署。继续看下一步;
8、发布部署网站
(1)、生成静态网页,执行命令行:
hexo clean //清除原先的旧编译文件
hexo generate //生成静态网页
该命令行执行完成以后,会在public目录下生成一系列的HTML、CSS文件。
(2)、找到_config.yml文件,打开并找见下面的内容:
# Deployment
## Docs: http://hexo.io/docs/deployment.htmldeploy:
type:
并修改为:
# Deployment
## Docs: http://hexo.io/docs/deployment.htmldeploy:
type: git
repository: git@github.com:ergouzi/ergouzi.github.io.git
branch: gh-pages
(3)、安装插件 hexo-deployer-git,执行以下命令行:
npm install hexo-deployer-git --save
(4)、发布,执行命令行:
hexo deploy
注意1:
Repository:必须是SSH形式的url(git@github.com:ergouzi/ergouzi.github.io.git),而不能是HTTPS形式的url(https://github.com/ergouzi /ergouzi.github.io.git),否则会出现以下错误:
[info] Start deploying: github
[error] https://github.com/ergouzi/ergouzi.github.io is not a valid repositor URL
使用SSH url,如果电脑没有开放SSH 端口,会致部署失败,出现以下错误:
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists
二、创建博文
9、创建博文
停止本地服务器(按下Ctrl+C),准备创建第一篇博文,执行命令行:
hexo new "我的第一篇博文"
然后重新启动本地服务器,你就可以在本地看到你的第一篇博文了。哈哈。。。。(有点小骄傲了)
10、生成静态网页
生成静态网页,执行命令行:
hexo generate
该命令行执行完成以后,会在public目录下生成一系列的HTML、CSS文件。
11、编辑文章
编辑文章,执行命令行:
我们在创建博文的时候会发现,在source/_post文件夹下会自动生成一个markdown文件:我的第一篇博文.md,然后我们就可以使用一个支持markdown语法的编辑器(例如sublime text2)来编辑文章;
11、发布部署
(1)找到_config.yml文件,打开并找见下面的内容:
# Deployment
## Docs: http://hexo.io/docs/deployment.htmldeploy:
type:
并修改为:
# Deployment
## Docs: http://hexo.io/docs/deployment.htmldeploy:
type: github
repository: git@github.com:ergouzi/ergouzi.github.io.git
branch: master
(2)安装插件 hexo-deployer-git,执行以下命令行:
npm install hexo-deployer-git --save
(3)发布,执行命令行:
hexo deploy
注意1:
Repository:必须是SSH形式的url(git@github.com:ergouzi/ergouzi.github.io.git),而不能是HTTPS形式的url(https://github.com/ergouzi /ergouzi.github.io.git),否则会出现以下错误:
[info] Start deploying: github
[error] https://github.com/ergouzi/ergouzi.github.io is not a valid repositor URL
使用SSH url,如果电脑没有开放SSH 端口,会致部署失败,出现以下错误:
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
12、确定博客地址并进行第一次访问
当你不是成功以后,可以到你的博客去查看了。但是博客地址是什么呢?来,我们继续:让我们重新进入github仓库的主页,选择settings,然后进入option选项卡下,然后往页面最后的位置找到github pages,修改下面的source中以确定博客所采用的部署代码的位置并保存,然后看下图(博客地址有标识,更改博客采用的源代码的设置也在里面):

三、更改网站主题
1、需求
hexo提供的默认主题,不能说奇丑无比吧!也并没有好到哪里去,这个时候,我们首先想到的是更改主题。
2、更改主题操作
更改网站主题(如果您不需要更改主题,请忽略这一步),以Hacker主题为例:
(1)进入项目根目录下的theme文件夹下,克隆Hacker主题;
(2)回到项目根目录下,找到_config.yml文件,使用编辑器打开,修改内容中的theme选项为Hacker
(3)生成静态网页,执行命令hexo generate;
(4)启动本地服务器,进入localhost:4000重新查看你的博客以及博文;
(5)发布部署新主题(每一次更换网站主题都需要重新发布部署打github上),具体操作请执行代码:
hexo clean
hexo generage //简写为hexo g
hexo deploy //简写为hexo d
网友评论