美文网首页面试android技术专栏程序员
在github上创建个人博客,其实没有那么难

在github上创建个人博客,其实没有那么难

作者: dorn19978 | 来源:发表于2017-01-16 00:37 被阅读1054次

前段时间萌发自己搭建博客的念头,冲动之下买了个云服务器,奈何个人对html的东西实在不通,折腾了几天,blog依然丑的可以。后来无意间看见在github上可以搭建个人blog,就用谷歌折腾该如何在github上搭建blog,奈何网上很多教程都过于古老,或者很多细节都含糊不清,导致爬了好几天几天坑,才blog搭建了起来。

成功搭建的hexo网站

我的hexo网站

如何在github上搭建blog

本文分为三个部分:

  • 本地环境搭建
  • github 部署
  • hexo 与github关联

需要的的原料

  • git
  • github 账号
  • node js
  • hexo
  • 个人域名(可选)

本地环境搭建

  1. 安装git
https://www.git-scm.com/download/win

选择你需要的版本,一路默认安装便可

  1. 安装node js
  • 32位下载地址
https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
  • 64位下载地址
https://nodejs.org/dist/v4.2.3/node-v4.2.3-x64.msi

下载完成后双击安装,不做任何操作,一直默认下去便可。

  1. 安装完成后win+R调出CMD命令,输入node -v,校验是否安装成功,如果出现以下信息,则表示安装成功</br>
    node js安装成功
  2. 安装完成node js后,在任意目录下打开cmd命令窗口,输入以下命令来安装hexo
npm install -g hexo

如果出现以下信息,则表示hexo安装成功</br>


hexo 安装成功
  1. 接着输入以下命令添加git依赖</br>
    注意:</br>
  • 该命令必须在hexo g 之前完成
  • 部署这个命令一定要用git bash,否则会提示Permission denied (publickey).
 npm install hexo-deployer-git --save

如果出现以下信息,则表示hexo git依赖安装成功


hexo git 依赖安装成功
  1. 创建hexo工程
    在任意盘符中创建一个文件夹,把它命名为hexo,打开该文件夹,在该目录下打开cmd,输入以下命令
hexo init

hexo 便自动创建了一个项目,目录结构如下:


hexo目录结构
  1. 现在在cmd命令下输入以下命令
hexo server -p 5001

如果出现以下信息,表示你已经生成了hexo工程。


hexo工程生成成功

</br>
现在,是时候在浏览器中展示你的成果了,在浏览器地址栏中,输入以下地址,如果出现以下页面,该页面便是你以后的blog的预览效果。

http://localhost:5001/
效果

github部署

如果以上的网页能正常显示,那么恭喜你,本地环境搭建已经基本完成,现在是时候将hexo部署到github上了,将hexo部署你还需要完成几个步骤:

  1. 创建一个github账号

  2. 创建一个新的软件仓库,名称格式必须为:github的用户名.github.io。</br>
    如:我的github用户名为:AriaLyy,那么该软件仓库的名必须为: AriaLyy.github.io</br>
    最终软件仓库如下:

    hexo软件仓库
  3. 现在点击Settings,往下拉,如果你看见下图的信息 Your site is published at http://AriaLyy.github.io/

    github网站生成
    只要出现可以点击的网络地址,那么表示github已经成功帮你自动生成一个静态网站了。
  4. 创建github ssk公钥
    在任意目录打开CMD,输入以下命令创建git ssh公钥,一路回车下去便可

ssh-keygen -t rsa -C "key_name"

接着讲ssh公钥添加到github中。</br>
ps:如果你碰到ssh-keygen不是内部命令,那么你需要将git安装目录下的Git\usr\bin路径设置在环境变量中。

hexo 已github关联

如果你已经完成了以上的步骤,那么你离成功只剩下一步之遥。</br>
还记得我们的hexo工程,以及*.github.io的软件仓吗?</br>
打开该文件,找到_config.yml文件,用文本编辑器打开,找到deploy字段,添加以下信息

deploy:
  type: git
  repository: git@github.com:AriaLyy/AriaLyy.github.io.git # 这个配置为你*.github.io软件仓库clone地址
  branch: master  #分支为master分支

这里有几点需要注意:

  • 每个参数,冒号后面,必须要有一个空格!!!!!!
  • repository 参数需要 ssh 的clone地址
  • branch 分支需要是master分支

如果你已经配置好以上步骤,接下来在hexo文件夹下打开cmd,输入以下命令,将hexo工程部署到github上。</br>

hexo d -g

注意:部署这个命令一定要用git bash</br>
如果一切顺利,那么将会出现类似于下面的成功提示信息

hexo github关联成功

那么在浏览器地址上输入:你的*.github.io软件仓库的名称,将会打开你的blog。


效果

如果一切顺利,请尽情享受你的喜悦吧。

这是我在github上创建的个人blog,点击我

相关文章

网友评论

  • 世外大帝:写的不错,遇到细节问题,还都特么让我遇上了,可以参考Hexo官方文档,遇到GitHub问题,参考GitHub官方文档
  • ae983f6e2b9d:这个 不怎么好,我创建过,然后 发现 维护很麻烦,正常的 提交备份都没问题(可以用脚本)。
    问题一: 设备环境局限性,你换了台机器得重新部署hexo和git环境;
    问题二: 如果你想修改一个以前的文件,那么会残留原来的历史文件,还得手动去删除(强迫症,你留着也没问题就是别人看源码也能看到这个)
    dorn19978:其实还好,对于个人小blog来说,hexo 加 page服务是很好的解决方案了,至于你说的两个问题都不是大问题。
    第一个问题,hexo和git环境都很好部署,几个命令就搞定了
    第二个问题,没有强迫症的路过,再说了,我们写blog分享的是知识,话说,也没多少人闲的看个blog还会F12看源码吧
  • 丁建雄:不错,搭建个人网站,还是学一下html5比较好,会比较有特色,更纯粹
    dorn19978:长远来说,是自己写html5好,如果只是写个小博客或者记录下文章一类的,hexo是个不错的选择:smile:
  • acc565a218c6:您好 请问一下, npm install hexo-deployer-git --save为什么一定要在 hexo g命令之前执行呢?而且您的文章中似乎没有用到hexo g这个命令,我实践了下也还没用到这个命令
    dorn19978:hexo g 为构建命令,在hexo g 之前为经验之谈,我最初在hexo g 之后执行npm install hexo-deployer-git --save,然后再使用 hexo d 进行部署,会出现git错误...
    acc565a218c6:只是有一个有一个问题,部署到github之后,原来设置的page自定义域名被清除变成默认的了……
    acc565a218c6:看了下其他教程贴 有的是本地部署好hexo(hexo init,g,server)之后修改配置文件好之后才 npm install hexo-deployer-git --save,
  • jjdxmashl:hexo int 我这边实践发现不行,提示不是命令,后面看了hexo命令,应该是 hexo init
    dorn19978:@jjdxmashl 抱歉,写错了,是init:smiley:

本文标题:在github上创建个人博客,其实没有那么难

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