美文网首页程序员Hexo
用 GitHub Pages + Hexo 搭建个人专属博客

用 GitHub Pages + Hexo 搭建个人专属博客

作者: Oswinr | 来源:发表于2018-12-08 19:22 被阅读71次

    如果你也渴望拥有一个属于自己的博客,那么你应该花费一些时间好好阅读本教程。


    学习最好的方法论 —— 就是去做。

    什么是 GitHub Pages?

    GitHub Pages 是 GitHub 提供的静态站点托管服务,它可以通过 GitHub 库托管你的个人、组织或项目的站点。
    你可以使用 Jekyll Theme Chooser 在线创建和部署 GitHub Pages 站点。如果你更喜欢通过本地创建和部署站点,你也可以使用 GitHub Desktop 或者命令行。
    GitHub Pages 是一种静态网页托管服务,因此不支持 PHP, Ruby, or Python 等服务端代码。
    本教程使用 Hexo 搭建个人 GitHub Pages,因此如果你想创建和部署组织或项目的网页,部分内容可能会不太适用,需要自行作出调整。

    注意:GitHub Pages 站点在互联网上是公开可见的,即便你的托管库是私密的。因此如果在你的网页库中有敏感数据,你可能会想在网页发布前移除它们。

    什么是 Hexo?

    Hexo 是一个快捷、简洁且高效的博客框架。你可以使用 Markdown 书写博文,弹指一挥间 Hexo 就可以利用其精致的主题生成精美的静态博客网页。

    Markdown 是一种标记语言,其语法简洁明了、学习容易,而且功能比纯文本更强大。

    准备

    1. 下载、安装与配置 Git
    2. 下载与安装 Node.js

    什么是 Git ? Git 是目前世界上最先进的分布式版本控制系统(没有之一)。

    下载、安装与配置 Git 的具体方式取决于你当前所使用的操作系统。

    基于 Windows 操作系统安装 Git

    下载 git for windows 安装程序。由于众所周知的原因,从左侧的链接下载 git for windows 十分缓慢。可以参考页面,收录了存储于百度云的下载地址。
    安装完成后,还需要最后一步设置,在命令行输入:

    $ git config --global user.name "Your Name"
    $ git config --global user.email "email@example.com"
    

    例如,你的名字为 Yunhao Zhu, 邮箱为 1234@qq.com

    $ git config --global user.name "Yunhao Zhu"
    $ git config --global user.email "1234@qq.com"
    

    基于 Mac OS X 操作系统安装 Git

    有三种方法:

    1. 使用 Homebrew, MacPorts:
    brew install git
    
    1. 直接从 AppStore 安装 Xcode,Xcode 集成了 Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。

    2. 或者下载 git for Mac OS X 安装程序。

    基于 Linux 操作系统安装 Git

    1. Linux (Ubuntu, Debian):
    sudo apt-get install git-core.
    
    1. Linux (Fedora, Red Hat, CentOS):
    sudo yum install git-core.
    

    安装 Node.js

    1. 下载 安装程序 安装 Node.js

    在Windows上安装时务必选择全部组件,包括勾选 Add to Path

    安装完成后,请打开命令提示符 cmd 输入

    node -v
    

    出现 vxx.xx.xx 代表安装成功!

    1. 安装 Node.js 的最佳方式是使用 nvm

    cURL:

    $ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
    

    Wget:

    $ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
    

    安装完成后,重启终端并执行下列命令即可安装 Node.js

    $ nvm install stable
    

    第三部:安装 Hexo

    呼,准备工作终于完成了!让我们马上使用 npm 来安装 Hexo,执行如下命令:

    $ npm install -g hexo-cli
    

    安装 Hexo 完成后,接着执行以下命令:

    $ hexo init <folder>
    $ cd <folder>
    $ npm install
    

    例如,你安装在c盘hexo文件夹下,则执行:

    $ hexo init /c/hexo
    $ cd /c/hexo
    $ npm install
    $ hexo generetor
    $ hexo server
    

    什么是 npm?

    npm 是 Node.js 的包管理工具(package manager), 帮助我们管理开发中会用到的各种 Node.js 包,极大的方便了我们的开发。

    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    

    打开浏览器输入http://localhost:4000/

    创建 GitHub Pages

    1. 注册 GitHub 账号

    2. 新建一个 repository 库,Repository name 输入 "Your username.github.io"

    3. 点击 Settings 下拉至 -> GitHub Pages -> Page name 必须与刚才的库名保持一致 -> 选择一个喜欢的主题 Publish page -> 在地址栏输入你的博客地址即可看到效果

    将本地 Hexo 代码部署至 GitHub

    1. 修改本地 Hexo 站点的配置文件 _config.yml,在末尾添加(xxx为你注册的GitHub用户名)
    deploy:
      type: git
      repository: https://github.com/xxx/xxx.github.io
      branch: master
    
    1. 利用 npm,上传本地代码,第一次 GitHub 可能会要求你输入用户名和密码
    npm install hexo-deployer-git --save
    hexo g
    hexo d
    

    输入刚才设置的 https://github.com/xxx/xxx.github.io 即可查看效果

    1. 发布你的第一篇博客,在根目录下输入
    $ hexo new "postname"
    $ hexo g
    $ hexo d
    

    结语

    恭喜你!看到这里,你已经成功掌握了个人博客的搭建技术,教程到这里也就结束了,都是最最基础的内容,关于 GitHub Pages 和 Hexo 还有很多进阶内容等着你去学习。本教程后续也会有更多进阶内容,如果你感兴趣的话,欢迎持续关注。
    最后,作者水平有限,如有错误、遗漏,欢迎批评指正。

    相关文章

      网友评论

        本文标题:用 GitHub Pages + Hexo 搭建个人专属博客

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