hexo + github pages 搭建博客

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xubuwei/article/details/86649144

GitHub Pages

GitHub 是基于 git 的强大免费代码托管方。同时还是很贴心的提供了另外一个功能,就是GitHub Pages,可以免费为用户托管静态网页,对开发者是相当用心了。但是要注意的是域名是绑定的(github.io),如果需要另外的域名,可以自行去第三方服务商(如阿里云)付费申请。

如何开启个人用户的GitHub Pages

首先是去GitHub官网申请账号。
登录进去后新建仓库 => 仓库名为 username.github.io [username为自己注册的用户名];
注意以下的提示,但是默认是开启这个发布地址的:
默认为开启发布的地址
此时直接去访问 username.github.io 可以直接看到基本的字符说明。接下来就是要这个仓库里面添加发布的静态网页。生成静态网页的方法可以是默认的jekyll(github默认的方式), 也可以是hexo(感觉强大些)。这里介绍hexo的方法。

hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。可以参考官网的介绍和使用,或者参考以下简略版安装和部署网页的方法。

环境准备

node.js (hexo 基于node.js)
下载Node.js:https://nodejs.org/en/download/
安装Node.js: http://www.runoob.com/nodejs/nodejs-install-setup.html

git(管理仓库)
https://git-scm.com/download/

安装hexo
Windows上在需要安装Hexo的目录下(新建一个文件夹)右键选择 Git Bash, 其余Linux或者Mac可以随意在命令行操作。

npm install hexo-cli -g   
hexo init #初始化网站   
npm install   (会安装node modules)

在hexo中添加主题(比如流行的yilia)

hexo clean
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia   

配置新主题

编辑目录下的_config.yml 文件,  找到 theme:属性并设置为yilia

本地查看博客网页

hexo g   ----生成网页
hexo s   ----打开服务器(默认localhost:4000)
打开 http://localhost:4000/

其余使用命令可以参考官网。

最后使用Hexo deploy部署到github
首先编辑根目录下_config.yml文件

deploy:
    type: git
    repo: [email protected]:username/username.github.io.git  #这里的网址填自己的账户名
    branch: master  

然后执行以下命令:

npm install hexo-deployer-git --save  (先确保安装git 部署插件,如已经安装可忽略)
hexo g  (生成网页)
hexo d  (部署到GitHub,过程中可能需要输入用户名密码,可以参考以下免密方法)

另外GitHub的免密登录方法(添加ssh key)

在Windows上的话选择Git Bush here,打开git bash;

//以下可以在Windows git bash 和任何类Linux的命令行上操作,是通用操作

ssh-keygen -t rsa -C "[email protected]" (github 注册邮箱)
ssh-add ~/.ssh/id_rsa (如果失败 可以执行 ssh-agent bash)
cat ~/.ssh/id_rsa.pub

将内容贴到GitHub ssh key 管理上。位置在账户的setting下 => SSH and GPG keys 管理下。

测试:

ssh -T [email protected]   (出现...You've successfully authenticated ...就是成功了)

最后的补充:多终端支持hexo

从上述的配置和仓库的创建可以看出,hexo的网页发布和GitHub上面的仓库管理其实是完全独立的。而hexo其实就是管理一些网页资源,包括markdown源码文件以及其余的网页资源。因此可以考虑在GitHub仓库下新添加一个branch来管理hexo的内容,最后hexo生成的网页依然发布到GitHub仓库的主分支上,二者相互不影响。并且换了电脑终端也可以直接从GitHub上将仓库拉下来,直接修改hexo 并发布就好,当然这需要设置好一些依赖的环境,比如nodejs和git。

branch思路如下图:
在这里插入图片描述
同时为了方便修改和操作,可以将GitHub的仓库默认分支改为hexo,这样拉下来就是hexo的工程内容。具体分支的操作可以参考如下:

  1. 进入到GitHub 的仓库,新建branch hexo,同时设置为默认
    在这里插入图片描述

  2. 在本地clone 下来这个仓库,默认为hexo 分支,删除其中的除了.git 文件夹外所有的内容

    git clone [email protected]:username/username.github.io.git

  3. 我们刚开始安装hexo的时候下载了一个文件夹,将其中除了.deploy* 外其余的目录都可以拷贝到仓库目录下,注意其余目录中比如theme目录下有额外的.git 相关的目录,全都删除掉,以避免仓库的git 管理影响。这就将hexo管理网页相关的东西拷贝到了仓库底下,然后上传到远程仓库。

     git add .
     git commit -m "add content to new branch"
     git push -u origin`
    

这样就可以允许我们多终端同步修改网页了。

参考:
https://www.cnblogs.com/jackyroc/p/7681938.html
http://fangzh.top/2018/2018090715/

猜你喜欢

转载自blog.csdn.net/xubuwei/article/details/86649144