在腾讯云上部署Hexo博客

推荐理由
----搭建我的的空间博客目前深受我的开发者的追捧,然而博客的种类和平台有不少,Hexo是一个开源的静态博客生成器。相比于其余博客而言它只要是web容器就能用。除了闷头专研技术以外,程序员还须要不断地写做进行技术积累,写博客是其中最重要的方式之一。商业博客平台很多,可是更符合程序员背景的方案,是本身开发一个博客平台或者使用开源的博客平台。开源的博客平台多如牛毛,并且不乏优秀之做,如 Hexo、Octopress、Jekyll、Wordpress。本系列文章将分享如何利用各类博客引擎在云端搭建属于本身的我的博客。今天是第一篇,介绍如何在 Ubuntu 14.04 上部署 Hexo 博客。Hexo 是用 Node.js 开发的一个静态站点生成器(Static Site Generator),支持 Markdown 语法写做,有着强大的插件系统,并且性能优异。阅读很多技术社区分享的文章时,看到国内很多同窗都有在用这个引擎,看来「市场占有率」不低。本文将介绍如何在一台 Ubuntu 14.04 的 CVM 云服务器上快速部署 Hexo 博客站点,如何快速发布一篇博文并经过云服务器上的私有 Git 仓库部署到 Web 服务器目录下。
前提条件
----若是想跟着本教程顺利完成 Hexo 博客的搭建,须要具有如下条件:一、一台安装了 Ubuntu 14.04 的 CVM 云服务器。通常我的博客的流量都比较低,初期选择 1核 1GB内存类型的服务器便可,并且有很多免费试用的时间。二、在本地电脑上安装 Node.js 和 npm,建议谷歌相应关键词了解具体步骤。此外,还要在云服务器上安装 Git 和 Nginx 两个必备的软件包。Git 用于版本管理和部署,Nginx 用于静态博客托管。
sudo apt-get updatesudo apt-get install git nginx -y
另外,本文均以 Windows 为例,演示在本地端的操做,Mac 上的操做会更为简单。Windows 上没有 Mac 的 iTerm2 ,咱们以 ConEmu + Git Bash 组成的终端做为替代。若是有读者感兴趣,后续再撰文介绍具体配置方法。这里写图片描述1. 本地 Hexo 安装及初始化
NPM 上还有许多 Hexo 相关的包,可是只要安装好了 hexo-cli 和 hexo-server 这两个核心组件以后,就可让博客跑起来了。咱们使用 Node.js 的包管理器 npm 安装 hexo-cli 和 hexo-server。npm install hexo-cli hexo-server -g
hexo-cli 是 Hexo 的命令行工具,可用于快速新建、发布、部署博客;hexo-server 是 Hexo 的内建服务器,可用于部署前的预览和测试。-g 选项,表示全局安装。接下来,为 Hexo 博客作一些基础配置,包括建立基础文件。这步操做很简单,Hexo 提供了一个快捷命令,只须要提供一个存放文件的目录地址便可。
hexo init ~/hexo_blog
在国内环境下执行该命令,速度会有些慢。由于须要从 Hexo 在 Github 上的仓库克隆;仓库克隆成功后,会自动执行一系列 npm 命令,自安装依赖模块。这时,咱们就已经有了一个写做、管理博客的环境。
2. 云端服务器配置
完成本地端的操做以后,暂时回到服务器的配置。在下面的操做以前,请确保已经购买了一台云服务器,而且可以以 ubuntu 用户身份正常登录。在这部分,要完成如下件事情:1.为本地的 hexo_blog 配置一个部署静态文件的远程仓库。 许多教程均以 Github 做为中转的平台,可是会让整个流程 变得更为复杂,并且会受服务器与 Github 之间网络状况的 影响。假如 Github 宕机或者被封,你将没法更新博客。2.配置 Nginx 托管博客文件目录。3.配置远程仓库自动更新到博客文件目录的钩子。2.1 建立私有 Git 仓库
在 /var/repo/ 下,建立一个名为 hexo_static 的裸仓库(bare repo)。若是没有 /var/repo 目录,须要先建立;而后修改目录的全部权和用户权限,以后 ubuntu 用户都具有 /var/repo 目录下全部新生成的目录和文件的权限。sudo mkdir /var/repo/sudo chown -R $USER:$USER /var/repo/sudo chmod -R 755 /var/repo/
而后,执行以下命令:cd /var/repo/git init --bare hexo_static.git
2.2 配置 Nginx 托管文件目录
接下来,建立 /var/www/hexo 目录,用于 Nginx 托管。sudo mkdir -p /var/www/hexo
和上一步相似,这里也须要修改目录的全部权和权限。sudo chown -R $USER:$USER /var/www/hexosudo chmod -R 755 /var/www/hexo
而后,修改 Nginx 的 default 设置:sudo vim /etc/nginx/sites-available/default
将其中的 root 指令指向 /var/www/hexo 目录。...server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; root /var/www/hexo; # 须要修改的部分 index index.html index.htm;...
保存并退出文件。若是之后购买并备案域名以后,能够再将配置中的 default_server 修改成你的域名。最后,重启 Nginx 服务,使得改动生效。sudo service nginx restart
作完这一步以后,你去访问服务器的 IP 时,应该仍是会报错的,由于 /var/www/hexo 目录是空的。
2.3 建立 Git 钩子
接下来,在服务器上的裸仓库 hexo_static 建立一个钩子,在知足特定条件时将静态 HTML 文件传送到 Web 服务器的目录下,即 /var/www/hexo。在自动生成的 hooks 目录下建立一个新的钩子文件:vim /var/repo/hexo_static.git/hooks/post-receive
在该文件中添加两行代码,指定 Git 的工做树(源代码)和 Git 目录(配置文件等)。#!/bin/bashgit --work-tree=/var/www/hexo --git-dir=/var/repo/hexo_static.git checkout -f
保存并退出文件,并让该文件变为可执行文件。chmod +x /var/repo/hexo_static.git/hooks/post-receive
至此,服务端的配置基本结束。
3. 完成本地 Hexo 配置
在第三部分的操做中,咱们将完成如下任务: 1. 修改 Hexo 配置中的 URL 和默认文章版式; 2. 新建博客草稿并发布 3. 配置自动部署到服务器端的 hexo_static 裸仓库;3.1 修改 Hexo 部分默认配置
进入 hexo_blog 目录后,主要有如下文件。-rw-r--r-- 1 benjisong 1049089 1619 Feb 24 14:45 _config.yml-rw-r--r-- 1 benjisong 1049089 174 Feb 24 13:51 db.jsondrwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:16 node_modules-rw-r--r-- 1 benjisong 1049089 484 Feb 24 12:16 package.jsondrwxr-xr-x 1 benjisong 1049089 0 Feb 24 13:50 publicdrwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:08 scaffoldsdrwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:13 sourcedrwxr-xr-x 1 benjisong 1049089 0 Feb 24 12:08 themes
其中,_config.yml 为 Hexo 的主配置文件。咱们首先修改博客的 URL 地址。# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://server-ip # 没有绑定域名时填写服务器的实际 IP 地址。root: /permalink: :year/:month/:day/:title/permalink_defaults:
接下来,修改 default_layout,该字段位于在 Writing 部分。将其从 post 修改成 draft ,表示每篇博文默认都是草稿,必须通过发布以后才能在博客站点上访问。# Writingnew_post_name: :title.md # File name of new postsdefault_layout: draft # 原来的值是 posttitlecase: false # Transform title into titlecase
暂时保存并退出文件。在 3.3 部分继续进行配置。
3.2. 新建博客草稿并发布
这里简单演示经过 Hexo 新建博文草稿,并发布的过程。执行以下命令,建立第一篇博文。hexo new first-post
你会看到相似以下输出:INFO Created: ~\Workspace\Git\hexo_blog\source\_drafts\first-post.md
在本地经过本身熟悉的编辑器,编辑博文。这里,咱们把本文的内容写入第一篇博客中。title: 在 Ubuntu 14.04 服务器上部署 Hexo 博客tags: - Ubuntu - Hexocategories: - Hexocomments: truedate: 2017-02-24 15:31:00---## 如下为 Markdown 文章正文。
而后,经过以下命令发布博客:hexo publish first-post输出相似下面这样:INFO Published: ~\Workspace\Git\hexo_blog\source\_posts\first-post.md
博客推送到服务器以后,就能够在网站上访问了。
3.3 经过 Git 部署
到了这一步,能够说万事俱备,只欠东风了。这个东风,就是经过 Git 将 Hexo 生成的静态内容推送到服务器。继续编辑 _config.yml 文件,找到 Deployment 部分,按照以下状况修改:deploy: type: git repo: ubuntu@CVM 云服务器的IP地址:/var/repo/hexo_static branch: master
保存并退出文件。以后,须要安装一个 Hexo 包,负责将博客所需的静态内容发送到设置好的 Git 仓库。npm install hexo-deployer-git --save
安装好后能够测试部署:hexo generate && hexo deploy
期间可能会提示输入 ubuntu 用户的登陆密码(若是没有设置 SSH 登陆)。成功以后的输出大体以下:... create mode 100644 tags/Node-js/index.html create mode 100644 tags/Ubuntu/index.htmlBranch master set up to track remote branch master from ubuntu@139.199.170.173:/var/repo/hexo_static.To 139.199.170.173:/var/repo/hexo_static * [new branch] HEAD -> masterINFO Deploy done: git
如今,咱们就能够在浏览器中打开 139.199.170.173,便可看到本身的博客网站了。咱们发现,Hexo 对 blockquote 标签的样式并不太美观,须要后续再调优。
这里写图片描述
4. 经过镜像快速部署
本文虽然将 Hexo 博客的大体部署过程明确地列出,可是对于部分初学用户来讲可能还会显得较为复杂。如何利用 CVM 云服务器提供商(即腾讯云)的其余服务,快速让其余用户没必要通过上面的步骤,快速进行部署呢?在云计算中,与虚拟机相关的一个概念是镜像(Image)。用户经过镜像,能够一键启动多个配置如出一辙的云服务器。咱们这一步经过 CVM 的「制做系统镜像」功能,将 Hexo 博客的服务器端打包。
这里写图片描述打包后的镜像,还能够上传到官方的服务市场,供全部用户使用;还能够直接共享给其余用户。若是有用户但愿使用该镜像,可在本文下方评论区留下本身的腾讯云帐号(登陆时使用的QQ号或邮箱)。4.1 镜像的使用
镜像中已经设置好了服务端,经过镜像启动 CVM 云服务器以后,读者只须要根据本文第三部分「完成 Hexo 本地配置」中的步骤,设置好本地 Hexo 写做环境的部署地址和服务器 URL等参数便可。这里有一点必定要注意,经过镜像启动云服务器时,务必从新设置密码或密钥,不然镜像的制做者有可能轻松地登陆你的服务器。这里写图片描述不要选择上图中的方式安装。总结
--本文较为完整地介绍了 Hexo 博客的安装及初始化,服务端如何配置经过 Git 部署等。与其余教程不一样,咱们没有使用公开的 Github 等第三方服务,而是直接在服务器上建立了私有仓库。而后,经过 Git 钩子,将 Hexo 生成的博客静态文件,快速地推送到 Web 服务的托管目录。因为 Hexo 是采用 Node.js 开发的,可能对于其余语言的学习者来讲吸引力不大,由于后续自主二次开发难度较高。所以,后续笔者还将介绍其余语言的博客引擎,如用 Python 编写的 Lektor 和用 PHP 编写的 Wordpress 等。敬请期待。文章出自腾讯云技术社区https://www.qcloud.com/community/article/241080001487926962推荐你们关注腾讯云技术社区微信公众号:QcloudCommunity这里写图片描述html