用Hexo和Github pages快速搭建个人博客

2019-12-26  本文已影响0人  子衿我心

为什么要写博客

一直以来都有想写博客的想法,但一方面又觉得自己没有什么技术积累,言之无物,另一方面又担心没有毅力能够坚持下去。终于还是决定先行动起来,即便是记录下日常学习的心得,踩过的坑,也或许对自己对他人有些微帮助

于是今天动手用hexo简单搭建了这样一个静态博客,搭建的过程也并不复杂,感兴趣的朋友可以参照下面步骤搭建一个自己的静态博客

开始搭建

准备工作

安装hexo

准备工作完成后,我们就可以安装Hexo了

npm install -g hexo-cli

-g 参数指定以全局方式安装

安装好hexo后,便可以在命令行使用hexo指令


hexo init <folder>

cd <folder>

npm install

其中folder为你想创建的文件夹路径,如果不指定folder,则默认会在当前文件夹创建(要求当前文件夹为空)

新建完成后,文件夹目录结构如下


.

├── _config.yml

├── package.json

├── scaffolds

├── source

|   ├── _drafts

|   └── _posts

└── themes

配置网站

到了这里,我们的网站已经初步成型了,为了看到我们网站的具体样子,我们可以执行

hexo server

在本地运行一个服务,默认4000端口,信息如下


INFO  Start processing

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

看到这样的提示,代表已经成功运行了,打开浏览器输入 localhost:4000 即可看到我们的页面

但是此时的网站没有名称,作者等一系列信息,需要我们手动配置

打开根目录下的_config.yml 如下


# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site

title: 

subtitle:

description:

keywords:

author: 

language: zh-Hans

timezone:

可以修改各个字段的值,如标题、作者、语言等等。可以给博客起一个喜欢的名字,并落上自己的署名

发布文章

博客配置好后,我们便可以开始书写文章了,用hexo创建一篇新文章也很简单

hexo new [layout] <title>

layout不指定的话默认试用post的布局,默认布局可以在_config.yml中修改

创建好文章后,我们就可以在source/_posts文件夹下找到并编写了,书写博文使用markdown

文章写好后,我们需要把markdown文件转换成静态的html文件以便显示在网页上,hexo为我们提供了一个简单的指令

hexo generate

可以简写为hexo g

在生成好文章后,刷新我们本地打开的博客网站(localhost:4000),可以看到我们的文章已经可以显示出来啦

部署网站

至此我们的博客基本功能已经实现了,但是所有的操作都只能通过本地运行的服务进行查看。为了把博客放到互联网上供所有人浏览,我们还需要将我们的博客部署到服务器上。

一个令人兴奋的消息是,github为我们提供了这样一个静态网站托管的服务,并且完全免费!

我们所需要做的,仅仅是拥有一个github账号,并且创建一个用于维护github page的仓库


deploy:

  type: 

在type字段中填写 git

之后在下一行新增一个字段 repo,填入你刚刚创建的git仓库地址,应该是如下形式


deploy:

  type: git

  repo: https://github.com/xxxx/xxx.github.io.git

repo字段根据选择的不同协议,可以选择https或者ssh认证

一切都配置完毕后,我们就可以将网站部署到github page上去了!

hexo deploy

可以简写为 hexo d

首次部署需要进行身份验证,如果采用https协议,需要输入github账号密码。如果采用ssh协议则不需要。

如果没有提示什么错误,稍等片刻,我们在浏览器输入与刚刚创建好的仓库的同名域名 xxx.github.io 即可以看到我们创建好的个人网站了!

个性化域名

如果想要为自己的网站设置一个个性化的域名,那么我们需要向域名供应商购买一个域名并且配置相应的dns服务,更多内容可以自行查阅,本文不再过多阐述。

相关阅读

hexo官方文档

github pages官方指南

markdown语法简介

上一篇下一篇

猜你喜欢

热点阅读