GitHub+Hexo 搭建个人网站(一)

前言

第一次接触个人技术博客是在本科专业学习的时候,寻求问题解决方案然后找到了CSND个人博客。后来也发现了越来越多同类型的技术博客,在专业问题的解决过程中,这些博客起到了很大的作用,于是我也想创建一个属于自己的博客,由此便催生出了这篇文章。文章记录了我从零开始搭建博客的全过程,技术不少来源于网络大牛,此文只是整理总结

准备工作

  • 获取个人域名
  • 注册GitHub账号
  • 安装node.jsnpm
  • 安装GitHexo

获取个人网站域名

域名即网站的入口,比如www.baidu.com,常见的有com,cn,net,org等后缀,萝卜青菜各有所爱,可以选择不同的后缀,本人选择的是常见的com后缀。很多小众奇特的后缀在大陆是没办法备案的,网站也就无法上线。然而使用GitHub托管我们的网站,完全不需要备案,因为托管我们的网站内容的服务器在美国
申请域名的方法有很多,本人使用的是阿里云
顺带一提,字符越短的域名越贵,.com后缀的域名价格普遍高于其他后缀。如果你已经有了空闲域名就无需购买,直接使用即可。

注册GitHub账号并创建个人仓库

使用邮箱注册GitHub帐号,点击GitHub中的New repository
创建新仓库,仓库名应该为:用户名.github.io
其中用户名即是注册的GitHub帐号名称,这是固定写法,比如我的仓库名为:

注意:

  • 一定要通过邮箱注册GitHub账号
  • 仓库名字一定要是用户名.github.io
  • 仓库创建成功不一定会立即生效,需要等待一段时间

安装Gitnode.jsnpmHexo

安装Git并配置SSH

简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。

  • 点击这里下载Git 选择对应的安装包,下载后安装

  • 在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。

  • 安装成功后,鼠标右击打开Git Bash,将你的Git与GitHub帐号绑定

  • 输入以下命令即可绑定:

    git config –global user.name “GitHub用户名”

    git config –global user.email “GitHub注册邮箱”

  • 生成ssh秘钥:

    ssh-keygen -t rsa -C "你的GitHub注册邮箱"
    
  • 复制生成的.ssh的文件夹中的id_rsa.pub密钥

  • 打开GitHub的设置页面,新建new SSH Key

  • 标题任意填写,正文中把刚刚复制的id_rsa.pub内容粘贴进去,然后新建即可
  • 测试GitHub公钥设置是否成功:

    ssh git@github.com

安装Node.js

点击下载Node.js

  • 安装后,检测Node.js是否安装成功,命令行中输入:

    node -v :

  • 测试npm是否安装成功,命令行中输入:

    npm -v :

安装Hexo

  • 在电脑任意盘符中创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击命令行
  • 使用npm命令安装Hexo,命令行中输入:

    npm install -g hexo-cli

  • 安装完成后,初始化博客,命令行中输入:

    hexo init blog

    hexo会自动下载一些文件到此目录

  • 生成页面,命令行中输入:

    hexo g

    hexo d

    执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去

  • 预览生成页面效果,打开浏览器输入地址:

    localhost:4000

    就能看到之前生成的页面了

注:关于hexo常用命令可以自行Google

发布网站

前面步骤都是生成网站并在本地预览,现在我们要做的就是要让网站在网络上可见。借助hexo,我们可以把代码全部上传到GitHub仓库中,由于前面已经创建好了仓库,访问地址
http://用户名.github.io 即是个人网站地址

按照hexo说明文档

blog根目录里的__config.yml_文件称为站点配置文件

blog根目录里的themes文件夹,里面也有个__config.yml_文件,这个称为主题配置文件

这两个文件之后我们要用到

关联Hexo与GitHub

  • 打开站点配置文件__config.yml_ 如下图修改最后几行的内容:

这个操作其实就是让hexo知道你要把blog部署在哪个位置,很显然,部署在GitHub的仓库里

  • 安装Git部署插件,输入命令:

    npm install hexo-deployer-git --save
    
  • 分别输入以下三条命令:

    hexo clean

    hexo g

    hexo d

此时,在浏览器中输入用户名.github.io即可访问到网站了,到这里说明网站发布成功,但是网站域名不及麻烦并且固定,后面我们将绑定自己注册的域名,从而能够在网络上输入个性域名访问到网站。

您的支持将鼓励我继续创作!