Fork me on GitHub

Hexo+GitHubPages搭建个人博客

前言

首先,欢迎各位来参观我的博客: Joahcy’s Blog.搭建博客的目的呢?一方面总结自己学习各种技术过程中踩过的坑以及心得,另一方面希望通过博客这个平台与大家一起交流,共同进步.其实博客搭建完成已有一段时间了,但是之后一直没有时间写这个教程,今天天清气爽,闲来无事正好有时间来完成这个博文.废话不多说,下面就让我们开始搭建属于自己的博客,保证小白白都能看懂,开始吧!
如果你还不知道你为什么要做一个博客,推荐你看:<<我为什么写博客>>
此时风景正好

关于GitHub

1.Github的优点

  • GitHub官网
  • GitHub是基于git实现的代码托管.git可能是目前最好用的版本控制系统了,非常受欢迎.
  • GitHub可以免费使用,并且快速稳定.
  • Github上面的世界很精彩,用久了你的眼界会开阔很多.

2.什么是Github Pages?

  • Github Pages可以被认为是用户编写的,托管在github上的静态网页.

3.为什么要使用Github Pages?

  • 可以绑定你的域名(但暂时貌似只能绑定一个).
  • 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.

关于Hexo

1.Hexo是什么?

  • Hexo官网
  • 正如官网所介绍的: A fast, simple & powerful blog framework.Hexo 是一个快速、简洁且高效的博客框架。

2.它有什么优点?

  • 速度快: 几十篇博文,只需数秒就可以生成静态网页
  • 一键部署: 只需一条命令就可以完成部署
  • 支持MarkDown语法
  • 有丰富的插件库

想要更多了解,还需各位自行上官网或Google.

安装和使用Git

  1. 安装
  2. 怎么打开和使用git呢?
    右击鼠标点击GitBash
    命令行使用git

  3. Git基础操作
    GIt基础操作

  4. Git教程: ProGit(中文版) 廖雪峰GIt教程

安装nodejs

  • Windows
    根据自己系统版本在官网下载安装即可.
  • Linux
    apt install nodejs

安装淘宝cnpm

  • npm 速度会有点慢,所以可以使用淘宝的cnpm代替npm,用法和npm几乎一样.
  • 安装: npm install -g cnpm --registry=https://registry.npm.taobao.org
    • Windows 桌面右击鼠标,点击Git Bash Here,进入命令行,执行以上命令
    • Linux 直接在命令行执行以上命令

Hexo

  • 安装

    1
    2
    cnpm install -g hexo-cli
    npm install hexo --save
  • 创建博客文件夹(比如:E:/blog/joahcy或/home/blog/joahcy)并初始化配置

    • Windows 进入博客文件夹(如我的是joahcy文件夹),右击鼠标,点击Git Bash Here,进入命令行,执行以下操作
    • Linux 进入博客文件夹,执行以下操作
      1
      2
      hexo init
      npm install

初始化并且依赖安装完成后,博客目录大概如下:
初始化后目录

  • 安装Hexo插件,保证后面操作不出错,在博客文件夹执行以下操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    npm install hexo-generator-index --save
    npm install hexo-generator-archive --save
    npm install hexo-generator-category --save
    npm install hexo-generator-tag --save
    npm install hexo-server --save
    npm install hexo-deployer-git --save
    npm install hexo-deployer-heroku --save
    npm install hexo-deployer-rsync --save
    npm install hexo-deployer-openshift --save
    npm install hexo-renderer-marked@0.2 --save
    npm install hexo-renderer-stylus@0.2 --save
    npm install hexo-generator-feed@1 --save
    npm install hexo-generator-sitemap@1 --save
  • 生成静态文件
    hexo g

  • 测试,本地查看效果

将博客部署到Github上

  • 创建github账户,Github首页点击右上角Sign up进行注册
  • 创建项目代码库
    注册完成后,点击New repository. 注意名字一定是 yourname.github.io,如图所示:
    创建仓库

  • 配置SSH秘钥
    配置Github的SSH密钥可以让本地git项目与远程的github建立联系,让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步.操作如下:
    1.查看本机用户目录是否存在SSH秘
    2.若不存在则创建新的秘钥,需填写自己的Github注册时的邮箱
    ssh-keygen -t rsa -C "your_email@example.com"
    相关提示:

    Generating public/private rsa key pair.
    Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
    

    直接回车,直接回车,则将密钥按默认文件进行存储.
    然后根据提示,输入密码和确认密码(其实可以不用密码,就是到输密码的地方,都直接回车,所以后面每次push就只需回车就可以).相关提示如下:

    Enter passphrase (empty for no passphrase): [Type a passphrase]
    Enter same passphrase again: [Type passphrase again]
    

    输入完成之后,屏幕会显示如下信息:

    Your identification has been saved in /c/Users/you/.ssh/id_rsa.
    Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
    The key fingerprint is:
    01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
    

    3.在GitHub账户中添加你的公钥,将公钥文件id_rsa.pub的内容复制
    4.登录Github,右上角进入settings,然后左侧点击SSH and GPG keys,接着点击New SSH key,如图:
    New SSH key
    5.测试
    可以输入下面的命令,看看设置是否成功
    ssh -T git@github.com
    如果出现下面的信息,则表示设置成功:

    Hi joahcy! You've successfully authenticated, but GitHub does not provide shell access.
    

    6.配置用户信息

    1
    2
    git config --global user.name "joahcy"//用户名
    git config --global user.email "joahcy915@gmail.com"//填写自己的邮箱

至此秘钥配置完成,本机已与Github建立了联系.

  • 修改博客目录(E:/blog/joahcy)下的_config.yml配置文件 (注意: 配置时,每个键值对之间都要加个空格)
    1.根据个人情况修改Site,Url和Pagination部分
    2.修改Deploy部分
    登录Github打开项目username.github.io
    打开项目

    复制项目HTTPS路径
    复制项目HTTPS路径

    找到关键字deploy,进行如图修改,repository为刚才复制的路径
    修改deploy

  • 部署
    进入博客目录(E:/blog/joahcy),执行以下命令.

    1
    2
    hexo g
    hexo d

或者直接执行hexo g -d
执行完之后会让你输入github的账号和密码,输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了.对应的地址是 username.github.io(我的是:joahcy.github.io)
如果觉得输入用户名和密码麻烦,可以修改deploy部分的repository,如图:
修改为SSH连接
修改
这样部署的时候就不用输入用户名和密码,是不是方便多了?

浏览器访问

通过浏览器访问自己的博客,地址为http://yourname.github.io
博客雏形

根据个人喜好修改博客主题

  • 1.在hexo官网找到自己喜欢的主题,然后克隆下来. (博客的主题都保存在博客根目录的themes文件夹下)
    如克隆Next主题,进入博客目录,执行一下命令:
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 2.找到全局_config.yml文件的theme关键字,改为next.(注:值是themes文件夹下主题文件夹的名字)
  • 3.详细修改主题样式配置
    修改主题目录下的_config.yml文件,在这就不详细解释了,可以找相应的教程来修改(注:简洁大方next主题有很多教程,当然也有其他的主题)

通过域名访问博客

  • 通过域名商购买自己喜欢的的域名(万网,西部数码,GoDaddy等等),我用的万网.
    搜索
    搜索
    找到可注册的域名
    找到可注册的域名
    如果用的万网,进入个人中心,点击域名
    进入个人中心
    点击域名后面的管理
    点击管理
    修改DNS 为f1gns1.dnspod.net 和 f1gns2.dnspod.net
    修改DNS
  • 在DNSPod官网注册账号,并添加DNS解析
    进入域名解析
    进入域名解析
    添加域名
    添加域名
    获取博客IP地址: CMD 里面 ping yourname.github.io 得到IP
    点击域名进去,添加两条记录,IP为刚才ping 得的ip
    添加记录
  • 在博客source目录下添加CNAME文件,内容为你的域名,然后再一次部署
    hexo g -d
  • 耐心等待……大约十几分钟就可以通过域名来访问了

写博客

  • 用hexo发表新文章
    hexo n "文章标题"
    会在项目 source/_posts 中生成 对应的.md文件,用编辑器打开编写即可。
    当然,也可以直接在source/_posts中新建一个md文件,写完后,推送到服务器上,执行以下命令即可在我们的站点看到新的文章.
    hexo g -d
  • 用Markdown写文章
    • 什么是markdown?
      Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」,「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果.
    • markdown有以下优点:
      • 专注你的文字内容而不是排版样式.
      • 轻松的导出 HTML、PDF 和本身的 .md 文件.
      • 纯文本内容,兼容所有的文本编辑器与字处理软件.
      • 可读,直观.适合所有人的写作语言.
    • 用什么工具写?
      • Windows : MarkdownPad2
      • Mac :用Mou 或 Atom
      • Web端: 用简书
    • 更多资料可以查看: 认识与入门 Markdown

后记

至此,博客基本搭建完成.搭建了2天很累,但是还是有一定的成就感的.以后的路还很长,好好写文章提高自己吧.

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!