Hexo && Github 搭建个人博客全纪录

最好的方式就是去官网学习
hexo
github官网


前不久看到同事已经把自己的博客搬到了hexo上,感觉自己有点low了.这几天捣鼓捣鼓了.发现有必要写一篇入门级的教程.网上的教程虽然很多,但很多并不是很全面.

概念篇

什么是hexo

Hexo是一个开源的静态博客生成器,用node.js开发,具有快速、简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成。支持markdown编写文章,可以方便的生成静态网页托管在github上。

这里一定要明确Hexo只不过是一个静态博客生成器而已,而github只不过是我们托管这些生成的静态网页的地址.

前期准备

笔者是在mac环境下安装的

  • 1.首先hexo是基于nodejs的,所以必须安装nodejs

  • 2.安装nodejs方法很多,我选择homebrew安装方式,所以需要安装它

  • 3.安装homebrew就很简单了,mac自带ruby脚本功能,一句话搞定

  • 4.hexo提交部署github需要使用git工具,所以需要安装git,用homebrew的话也是一句话搞定

整理一下安装顺序:homebrew-nodejs-hexo-git

安装Node.js

  • 1.安装brewhome,一句话搞定
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew官网

  • 2.安装nodejs
    nodejs官网
    2.1 第一种方式,brewhome安装,一句话搞定
    brew install node
    2.2 第二种方式,前提是已经安装好Xcode和git,安装git方法在下面介绍
git clone git://github.com/joyent/node.git
cd node
./configure
make
sudo make install

2.3 第三种方式,下载源码(http://nodejs.org/download/),解压后编译执行同上

安装hexo

注意路径,通过终端,当前在什么路径,搭建的hexo博客路径就是哪里

路径
  • 第一种方式,用nodejs自带npm安装

  npm install -g hexo
  hexo init
  npm install
Hexo && Github 搭建个人博客全纪录_第1张图片

如果还有一hexo的命令不是很熟悉,随时可以通过-help查询

Hexo && Github 搭建个人博客全纪录_第2张图片
  • 第二种方式,下载源码(http://www.nodejs.org/download/),编译执行
./configure --prefix=~/nodejs && make && make install
cp ~/nodejs/bin/node /usr/sbin/node
~/nodejs/bin/npm install -g hexo

到现在我们基本能够通过看到刚才搭建的静态博客了

来看看效果吧!
根据上面的命令,我们可以选择genrate命令来生成静态文件


Hexo && Github 搭建个人博客全纪录_第3张图片
  • 通过sever命令启动一下本地服务
  • 最终效果
Hexo && Github 搭建个人博客全纪录_第4张图片
最终效果

到目前为止,我们这个博客还是本地的,所以别人是无法看到的,接下来我们就把他和github联系起来,别人就可以看到了.

安装git

  • 第一种方式,homebrew安装,一句话搞定
    sudo brew install git
  • 第二种方式,前提是已经安装好Xcode
curl -O http://kernel.org/pub/software/scm/git/git-1.7.5.tar.bz2
tar xjvf git-1.7.4.1.tar.bz2
cd git-1.7.4.1
./configure --prefix=/usr/local
make
sudo make install
which git
  • 第三种方式,下载源码(https://www.kernel.org/pub/software/scm/git/),编译执行同上.
  • 第四种方式:图形界面Github Desktop

注册github账号

github官网
注册的过程就不讲了.

  • 创建新的仓库


    Hexo && Github 搭建个人博客全纪录_第5张图片
  • 设置新的仓库


  • 自动生成gitpage


    Hexo && Github 搭建个人博客全纪录_第6张图片
  • 选择一种样式发布页面


    Hexo && Github 搭建个人博客全纪录_第7张图片

过一会就可以访问刚才的


Hexo && Github 搭建个人博客全纪录_第8张图片

地址就可以看到你的页面,** 接下来我们把仓库里面的文件,替换为我们用hexo生成的静态文件就可以了 **

在则之前还需要设置一下ssl.打开github的账号设置,如下图

Hexo && Github 搭建个人博客全纪录_第9张图片

账号就是你注册github时的邮箱

  • 然后就是
    将SSH key添加到Github登录到GitHub页面,Account Settings->SSH Public Keys->Add another key将生成的key(id_rsa.pub文件)内容copy到输入框中,save。
  • 生成SSH key
    ssh-keygen -t rsa -C "[email protected]
    注意生成的目录在~/.ssh

然后将这个复制到

Hexo && Github 搭建个人博客全纪录_第10张图片
  • 测试连接
    ssh [email protected]
    如果出现如下提示,说明成功了
  • 设置个人信息
git config --global user.name "xxx”
git config --global user.email [email protected]

将刚才新建的仓库拉到本地,修改文件.将hexo生成的文件同步到github

  • 通过hexo生成静态文件
    刚才已经生成了
  • 将public下的文件添加到刚才check下拉的仓库中替换


    Hexo && Github 搭建个人博客全纪录_第11张图片
Hexo && Github 搭建个人博客全纪录_第12张图片
Paste_Image.png
  • 然后将所做的改变commit,同步的github上

  • 现在就可以别人就可以通过连接看到你的博客了

最终效果

Hexo && Github 搭建个人博客全纪录_第13张图片

网页并没有加什么样式

部署

我们可以直接通过命令行部署到github上,注意前提要设置SSL.具体的设置方式上面已经提到过

编辑_config.yml
你在部署时,要把下面的kingcodexl都换成你的账号名。

deploy: 
  type: github 
  repository: https://github.com/kingcodexl/kingcodexl.github.io.git 
  branch: master

据说最新版本的hexo 中,这里的 type 要写成 git,而不是 github。
执行下列指令即可完成部署。

hexo generate
hexo deploy

总结

其实还有很多可以优化的地方,还有很多没讲到的地方,比如一些常见的设置,主题切换等.不过只要把博客搭建起来了,这些都很简单.网上也有很多的资料可查.下面总结的一些链接都比较哟使用价值

相关链接
如何搭建一个独立博客
Mac搭建hexo + github

你可能感兴趣的:(Hexo && Github 搭建个人博客全纪录)