前言

该文章主要为了记录我如何在GitPages上面部署博客网站,这里的话,码云上面也有相同的功能。

若有小伙伴担心GitHub担心把中国的访问也禁了的话(大概不会吧),可以在码云上面部署。流程应该是差不多的。

因为我使用的域名是.cn后缀,所以部署到GitHub上面就不用备案了。码云是国内的,应该要备案了,这个就看各位小伙伴的选择了。

可以看看我的网站:

https://colablog.cn/

开始

第一步,安装工具

我们需要创建一个空的项目,怎么创建呢?这里我是使用Hexo的博客框架,

他会使用Markdown引擎快速渲染出静态页面。

安装hexo的前提是需要安装好下面的应用程序:

Node.js (Should be at least nodejs 6.9)

Git

然后使用npm安装Hexo。(建议去配置个淘宝的cnpm镜像,快贼多)

$ npm install -g hexo-cli

第二步,hexo创建项目

我们需要使用hexo建立一个空的项目,这里的项目名为blog。

$ hexo init blog
$ cd blog
$ npm install

为了在可以在本地调试效果,我们需要安装hexo-server,就是Hexo的服务器

$ npm install hexo-server --save

然后启动hexo-server,访问的网址的localhost:4000

$ hexo server

启动后应该可以看见下面的界面

新建名为test的文章测试一下,创建好后在locaohost:4000可以看到新的文章哦。

$ hexo new post test //全写
$ hexo new test //简写,默认为post(文章)

到此为止你已经可以在本地建好博客网站啦。

第三步 使用NexT主题(可跳过)

hexo也有推荐使用的主题列表,入口在这:

https://hexo.io/themes/

不过我没有去看这些主题,我是使用了NexT的主题,入口在这:

http://theme-next.iissnan.com/theme-settings.html#author-sites

首先我们克隆最新的NexT版本,

$ cd <你的项目目录>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后在hexo的配置文件(_config.yml)文件里面,找到theme字段,修改如下:

theme: next

个人觉得next默认的主题样式还是比较丑的,我们可以在next主题下看到还有另外三种样式,搜索关键字

Schemes可以看到如下主题,我使用的第三个Pisces

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

主题如下:

看着是不是怪丑的,特别是第二篇文章,怎么会展示这么多呢?其实可以调整的,反正我是找了好久,在next主题下,

搜索关键字auto_excerpt,修改如下:

auto_excerpt:
enable: true //开启该功能
length: 150 //首页展示的字数限制

到此为止我们已经可以使用NexT主题啦。更详细的配置就进去官网看看吧(上面有)。

第四步 部署到GitHub

首先,我们要在GitHub上面创建一个仓库,这里我叫做blog吧。

然后我们需要把我们本地的blog项目初始化一下。

$ cd <你的本地项目目录>
$ git init
$ git add -A //把全部都添加进去吧,也没啥
$ git commit -m "首次提交"
$ git remote add origin <你自己的仓库路径,例:https://github.com/xxx/blog.git>
$ git push -u origin master

然后我们进入blog仓库的setting中,然后往下拉看到GitHub Pages

修改完后页面会自己刷新,然后重新回到GitHub Pages这部分。你会看到他给了你一个网址,没错!就是这个网址,

你打开试试!!试试就试试,404...。

你先记住这个网址,咱们先把这个网址叫做博客网址吧。

其实部署到GitPages上面的话,hexo还是要做一些设置的,不然他怎么知道你要部署到那个地方去哦。设置完后以后部署文章会很简单的:

设置你项目的root路径,在hexo配置文件(_config.yml)中,搜索关键字root, 改为你的仓库名称,如下:

# URL
root: /blog

在hexo的配置文件(_config.yml)中,搜索关键字deploy(其实就在最下面),设置如下:

deploy:
type: git
repo: <你的仓库地址> //https://github.com/xxx/blog.git
branch: master

安装hexo-deployer-git,

$ cd <你的项目目录>
$ npm install hexo-deployer-git --save

然后你再执行下面这条命令就OK了!

$ hexo generate --deploy //全写
$ hexo g -d //缩写

赶紧打开上面说的博客网址看看,是不是404!,没错!

等一会吧,GitHub还没缓过来呢,执行完命令之后大概差不多一分钟之后刷新一下,

你就可以看到你梦寐以求的页面了。

以后咱们创建文章就很简单了,新建并且编写好文章之后,执行使用部署到服务器的命令就Ok了。操作如下:

$ hexo new <文章名> //新建文章
$ hexo g -d //部署到GitHub,你就可以看到的新文章啦!

毕竟第一次难免是比较困难。嗯,没错,我说的是部署GitPages。

如果你也是跟着我这篇文章一步一步走的话,应该是没什么毛病的,因为我是自己重新部署一个项目的,

然后一步一步的把步骤记录下来的。如果有什么问题的话,可以留言一下,或致邮箱821312534@qq.com。谢啦。

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=qqkpn94ul1vr

个人博客网址: https://colablog.cn/

如果我的文章帮助到您,可以关注我的微信公众号,第一时间分享文章给您

GitPage部署的更多相关文章

  1. 使用Travis CI自动部署Hexo到GitHub

    原文链接(转载请注明出处):使用Travis CI自动部署Hexo到GitHub 前言 使用 hexo + gitPages 搭建个人博客的人都知道,每当要发表一篇博文,第一步得手动使用 hexo g ...

  2. 码云上部署hexo博客框架

    title: 码云上部署hexo博客框架 Hexo框架在码云上实现个人博客 本文受 https://www.jianshu.com/p/84ae2ba1c133 启发编写 本地调试 安装完Node.j ...

  3. [原]CentOS7.2部署node-mapnik

    转载请注明表作者think8848及出处(http://think8848.cnblogs.com) node-mapnik依赖项中要求g++ >= 5, toolchain (>= GL ...

  4. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  5. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

  6. 结合Jexus + Kestrel 部署 asp.net core 生产环境

    ASP.NET Core 是微软的全新的框架.这一框架的目标 ︰ 跨平台 针对云应用优化 解除 System.Web 的依赖. 获得下面三个方面的优势,你可以把它认为是一个C# 版本的NodeJS: ...

  7. 4.Windows Server2012 R2里面部署 MVC 的网站

    网站部署之~Windows Server | 本地部署:http://www.cnblogs.com/dunitian/p/4822808.html#iis 后期会在博客首发更新:http://dnt ...

  8. Win10 IIS本地部署MVC网站时不能运行?

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 部署后出现这个错误: 打开文件目录后发现是可以看见目录的,静态页面也是可以打开的 ...

  9. 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack(131)

    上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...

随机推荐

  1. GitHub代码阅读神器,你值有拥有!

    (题图:from  github) Github作为全球最大的程序员聚集地,已经成为学习开发技能的绝佳伴侣(如果你是程序员,但你还没有账户的话,这里建议你去signup,毕竟能增加成长的机会,不能错过 ...

  2. Bzoj 3170[Tjoi 2013]松鼠聚会 曼哈顿距离与切比雪夫距离

    3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1318  Solved: 664[Submit][Stat ...

  3. android_layout_framelayout

    framelayout最大的特点,个人认为就是N个元素都会重叠地堆在左上角,除非你手动指定位置.相对布局relative也是如此,但是他妈的人家不可以指定布局的垂直与水平,frame可以,但是指定垂直 ...

  4. linux应用程序设计--Makefile工程管理

    Makefile文件描述了整个工程的编译.链接等规则.包括:工程中哪些源文件需要编译以及如何编译:需要创建哪些库文件以及如何创建这些库文件.如何产生最终的可执行文件. Makefile相关术语 1.规 ...

  5. openstack-neutron基本的网络类型以及分析

    [概述] Neutron是OpenStack中负责提供网络服务的组件,基于软件定义网络的思想,实现了网络虚拟化下的资源管理,即:网络即服务. [功能] ·二层交换 Neutron支持多种虚拟交换机,一 ...

  6. 使用DQL查询数据库

    DQL ( Data Query Language) 是数据查询语言,如 Select 语句#### 一.DQL 语法 ```sqlSELECT [ALL | DISTINCT]{* | table. ...

  7. JavaScript数组高性能去重解决方案

    在大多数的人眼里,数组去重是一个很简单的课题,很多人甚至熟练掌握了多种数组去重的方法,然而大多时候,我们却忽略了数组去重所消耗的时间资源.譬如我们在做前端性能优化的时候,又有多少人会考虑JavaScr ...

  8. CentOS 下编译安装PHP

    1.   去php官网下载源码 http://www.php.net/downloads.php ,我下载使用的版本是(php-5.4.8.tar.gz) 2.   安装环境 yum install ...

  9. linux初学者-磁盘分区方式篇

    linux初学者-磁盘分区方式篇 一般的计算机都会采用mbr分区方式,这种分区方式只能够建立四个主分区,如果还需要或更多的分区,就需要将其中一个主分区建立成一个扩展分区,在里面建立逻辑分区,这些分区信 ...

  10. HTTP_4_返回结果的HTTP状态码

    状态码:返回请求结果. 状态码种类繁多,以下总结常用的状态码:     类别 信息性状态码 1XX 服务器接受请求,继续处理       成功状态码 200 OK 请求处理成功,并返回资源(响应报文中 ...