美文网首页
Hexo搭建博客

Hexo搭建博客

作者: 长城_changcheng | 来源:发表于2018-01-31 00:22 被阅读0次

一、项目博客构建

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

相关文章

网友评论

      本文标题:Hexo搭建博客

      本文链接:https://www.haomeiwen.com/subject/duehzxtx.html