GitPages部署本身的网站

前言

该文章主要为了记录我如何在GitPages上面部署博客网站,这里的话,码云上面也有相同的功能。
如有小伙伴担忧GitHub担忧把中国的访问也禁了的话(大概不会吧),能够在码云上面部署。流程应该是差很少的。
由于我使用的域名是.cn后缀,因此部署到GitHub上面就不用备案了。码云是国内的,应该要备案了,这个就看各位小伙伴的选择了。
能够看看个人网站:html

https://colablog.cn/node


开始

第一步,安装工具

咱们须要建立一个空的项目,怎么建立呢?这里我是使用Hexo的博客框架,
他会使用Markdown引擎快速渲染出静态页面。
安装hexo的前提是须要安装好下面的应用程序:git

Node.js (Should be at least nodejs 6.9)
Gitgithub

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

$ npm install -g hexo-cli


第二步,hexo建立项目

咱们须要使用hexo创建一个空的项目,这里的项目名为blog。服务器

$ hexo init blog
$ cd blog
$ npm install

为了在能够在本地调试效果,咱们须要安装hexo-server,就是Hexo的服务器hexo

$ npm install hexo-server --save

而后启动hexo-server,访问的网址的localhost:4000框架

$ hexo server

启动后应该能够看见下面的界面
hexo-server页面工具

新建名为test的文章测试一下,建立好后在locaohost:4000能够看到新的文章哦。post

$ 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主题

看着是否是怪丑的,特别是第二篇文章,怎么会展现这么多呢?其实能够调整的,反正我是找了很久,在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

修改完后页面会本身刷新,而后从新回到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

相关文章
相关标签/搜索