300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 使用Hexo搭建个人博客网站

使用Hexo搭建个人博客网站

时间:2019-09-26 09:21:35

相关推荐

使用Hexo搭建个人博客网站

Step 1. 创建 Github Pages

在github新建一个repo,并命名为username.github.iosetting中选择主题即可使用https://username.github.io访问到主页

Step 2. Hexo 环境搭建

Hexo是基于nodehs的快速、简洁且高效的博客框架。

推荐教程:

hexo官方文档: https://hexo.io/docs/index.html 说的非常详细极客学院:/project/hexo-document/

2.1 安装Node.js

网站维护了nodejs的各版本安装包的PPA,我们可以从该网站上下载执行导入。

$ curl -sL /setup_8.x | sudo -E bash 复制代码

接下来安装nodejs,安装完成之后npm也自动安装好了。

$ sudo apt-get install nodejs复制代码

安装完成之后我们查看一下$ node -v$ npm -v的版本。

2.2 使用npm安装Hexo

npm是Node.js安装时自带的类库,是目前全球最大的类库之一,通过npm install可以直接安装基于Node.js的所有插件

$ npm install hexo-cli -g 复制代码

Step 3. 创建及启动网站

创建一个网站的目录,此处命名为blog

通过blog目录创建站点

$ hexo init blog复制代码

进入blog 安装插件支持

~/blog$ npm install复制代码

启动站点

~/blog$ hexo server复制代码

或使用--denug开启调试

~/blog$ hexo s --debug 复制代码

查看站点: 在浏览器中查看http://localhost:4000/

Step 4. 部署到 Github

4.1 配置Github

~/blog$ vim _config.yml复制代码

修改deploy下

# 这里冒号后面一定要有空格deploy:type: gitrepo: /username/username.github.io复制代码

4.2 部署到Github

安装部署插件

~/blog$ npm install hexo-deployer-git --save复制代码

清理项目(optional)

~/blog$ hexo clean复制代码

部署

~/blog$ hexo deploy复制代码

Step 4. 更改博客主题

进入( https://hexo.io/themes/ )选择主题,进入相应的repo。 此处以bootstrap-blog为例。

~/blog$ git clone /cgmartin/hexo-theme-bootstrap-blog.git themes/bootstrap-blog复制代码

根据README中的setup Instructions安装插件

~/blog$ npm install hexo-tag-bootstrap --save复制代码

修改blog根目录的_config.yml,将theme修改为bootstrap-blog

更新并查看,先清空缓存hexo clean,然后启动服务器hexo s --debug,在本地浏览器输入localhost:4000/查看效果。

Step 5. 创建文章

$ hexo new "blog"INFO Created: ~/blog/source/_posts/blog.md复制代码

编辑md

---title: blog1date: -03-16 15:28:40tags: tag1categories: cat1---MY FIRST BLOG! // 这里是要展示的缩略图<!--more--> // 以下是查看全文复制代码

清理后启动 本地查看预览

$ hexo s --debug复制代码

5.1 创建一个新的标签页

$ hexo new page "github"INFO Created: ~/blog/source/github/index.md复制代码

修改配置文件themes/主题名称/_config.yml,增加一个menu中一个页面菜单。

hexo 参考教程: //01/03/getting-started-with-hexo-blog/

主题:/cgmartin/hexo-theme-bootstrap-blog

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。