分享

搭建 Hexo 个人博客 写作与部署

 MX飞鱼 2019-04-18

在本地安装Hexo框架

任务时间:大概需要三分钟

安装git

需要首先在本地安装[git],可以在这里下载

在安装过程中选择将git添加到环境变量 (Add to PATH)

通过使用git, hexo可快速将本地的更新内容部署到服务器上的网站中

安装Hexo

Hexo是基于Node.js的,因此需要先安装它

可以在这里下载,同样需要将它添加到环境变量

随后通过Node.js提供的包管理器npm安装Hexo:

打开命令行(cmd 或 git bash),输入命令

npm install -g hexo-cli

随后输入hexo version,如果Hexo已被安装,你将能看到相关的版本号

初始化Hexo

选择一个你喜欢的地方放置博客文件,在命令行中进入父目录(通过cd命令)

输入下列命令将创建一个Hexo博客文件夹

hexo init <起个名字> # 例如 hexo init MyBlog
cd <刚才的名字> # 例如 cd MyBlog
npm install

此时将能看到一个这样的目录

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

属于我们博客的本地Hexo环境已经搭建完毕

尝试写作与预览效果

任务时间:大概需要两分钟

新建一篇文章

命令行进入我们的博客文件夹,输入下列命令将新建一篇文章

hexo new <文章名> # 例如 hexo new helloworld

此时你将能够在博客的 public/_posts/ 文件夹下看到所创建的文章 (helloworld.md)

用记事本打开它,向其中写入任意内容

生成个人博客

输入下列命令即可根据当前所设置的主题、已有的文章生成网页文件

hexo generate # 或者输入 hexo g

整个个人博客网站即位于public/ 文件夹下

在本地浏览个人博客

如果直接使用浏览器打开public/index.html 不能显示正确的样式,如果希望在本地预览博客,在命令行中输入下列命令

hexo server # 或输入 hexo s

此刻可在浏览器中输入127.0.0.1:4000 来预览博客 (默认设置下)

在服务器上部署

任务时间:大概需要十分钟

安装git与Nginx

git帮助我们随时部署博客更新,安装:

sudo apt-get install git

Nginx将我们的博客网站供互联网访问,安装:

sudo apt-get install nginx

设置Nginx

创建一个文件夹用于存放我们的网站

mkdir -p blog # 在这个例子中的路径是 /home/ubuntu/blog

修改Nginx的设置,将网站的根目录设置为这个文件夹:

输入以下命令

sudo nano /etc/nginx/sites-available/default

在其中找到下列内容并修改

...
server {
    ...
    ...
    root /home/ubuntu/blog; # 将此处设为你所创建的文件夹
    index index.html index.htm;
    ...
    ...
    server_name blog.example.com; # 设置你的域名(托管单个网站时可以不用设置)
...

创建一个Git仓库

创建一个裸仓库

git init --bare <名字.git>     # 例如 git init --bare blog.git
                            # 记得blog.git/ 与blog/文件夹的功能不同

创建一个钩子,使得这个仓库在接受提交后自动将所有文件放到之前的网页目录中去:

nano .../<名字.git>/hooks/post-receive #例如 nano blog.git/hooks/post-receive

向其中写入以下内容:

git --work-tree=.../<网页文件夹> --git-dir=.../<名字.git> checkout -f
# --work-tree中填Nginx指向的网页文件夹路径 --git-dir填创建的git仓库的路径
# 例如 git --work-tree=/home/ubuntu/blog --git-dir=/home/ubuntu/blog.git checkout -f

需要给这个钩子添加可执行权限:

chmod +x .../<名字.git>/hooks/post-receive
# 例如 chmod +x /home/ubuntu/hooks/post-receive

到此,我们服务器就已设置完毕了

裸仓库的意思是只接收推送,而不会在其上工作(通常以.git结尾命名)

推送到服务器

任务时间:大概需要三分钟

SSH

当我们从本地向服务器的blog.git仓库推送时,通过SSH公钥来验证我们的身份。

因此,需要一对密钥来进行认证,在这里生成密钥(如果已经拥有请跳过生成的步骤):

打开git-bash (该工具包括在MSysGit软件包中)

ssh-keygen # 随后根据提示输入信息,按回车为默认

默认情况下,它将生成于用户目录(C:\User\<你的用户名>)下的.ssh\文件夹中,名为id_rsa 与 id_rsa.pub。

其中id_rsa.pub为公钥,将它的内容写到服务器中/home/ubuntu/.ssh/authorized_keys文件夹里。

请注意:如果有多对公钥,需要配置一个config文件才能指示使用哪个私钥进行验证,它类似下面这样:

# 位置在....sshconfig
Host blog.styxs.cn
    HostName blog.example.cn
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa
    User ubuntu

推送

安装Hexo的git部署插件,输入命令

npm install hexo-deployer-git --save

编辑博客文件夹下的_config.yml文件,设置部署信息

...
deploy:
    type: git
    repo: 用户名@服务器IP或域名:路径/裸仓库.git
    branch: master
...

repo中填写内容的示例: ubuntu@111.111.111.111:/home/ubuntu/blog.git

在本地预览网页无误后推送到服务器

hexo generator # 生成网页文件
hexo server # 在本地预览
hexo deploy # 推送到服务器

以上就是本地写作并部署到云服务器的Hexo博客工作流。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多