博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Hexo+Github搭建博客
阅读量:5962 次
发布时间:2019-06-19

本文共 3695 字,大约阅读时间需要 12 分钟。

作者:桂。

时间:2017-06-10  08:08:04

链接: 


前言

开会开了整整一周,刚下火车回来。打算记录自己看的电影、书籍,记录一些感性的文字,这类信息对公式、排版要求比较简单,想着自己搭建一个基本型博客。

一、环境及软件

  A-环境

  • windows8.1系统
  • 64位

  B-软件

1-Node.js

类似javascript,网页制作三件套:html(内容)+CSS(结构布局)+JS(javascript,网页的行为)。

2-Git

 Git是目前最先进的版本控制系统,拥有最多的用户数量并管理着数量庞大的实际软件项目;风靡全球的Github更是让Git版本控制系统名声大震。

3-hexo

 是由台湾个人团队基于 Node JS 开发的一个快速、简洁且高效的博客框架。完全开源,源代码托管在 Github 上。安装后,通过其简单的命令就可以在本地快速的搭建起一个个人博客。官网上提供的文档全面且易阅读,非常容易上手。

Hexo:右键选择Git bash here.

安装Hexo:

npm install hexo-cli -g

  直接的复制粘贴是不行的,可以按如下操作:

右击左上角的图标→属性→快速编辑模式打钩

鼠标点击右键即可粘贴。

安装完毕

二、博客搭建

几个hexo常用的命令,#后面为注释。

$ hexo g #完整命令为hexo generate,用于生成静态文件$ hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览$ hexo d #完整命令为hexo deploy,用于将本地文件发布到github上$ hexo n #完整命令为hexo new,用于新建一篇文章

  pacKage.json的更多信息。

  A-搭建本地博客

初始化博客

cd d:/hexo//npm install hexo-cli -g   此步骤为安装操作,假设已完成hexo init blogcd blognpm installhexo g # 或者hexo generatehexo s # 或者hexo server,可以在http://localhost:4000/ 查看

  这个时候输入http://127.0.0.1:4000/理论上可以访问了,但我这里报错。做了修改:  

If you can run hexo s perfectly, but can’t vist the local page at http://localhost:4000/blog/. May you can try another port like 5000:

$ hexo server -p 5000INFO  Start processingINFO  Hexo is running at http://0.0.0.0:5000/blog/. Press Ctrl+C to stop.

  但这样的修改只是一次性有效,要想永久有效:You can add this configuration to the file _config.yml at root:

server:  port: 5000 # or anohter number  log: false  ip: 0.0.0.0  compress: false  header: true

  如图:

Run, then ok:

$ hexo sINFO  Start processingINFO  Hexo is running at http://0.0.0.0:5000/blog/. Press Ctrl+C to stop.

  这样本地的博客就搭建完成了。

  B-博客编辑

可以借助markdown进行编辑,考虑到自己此次搭建的博客不复杂,直接用之前的马克飞象,一来可以上传,二来可以同步到自己的印象笔记。

新建笔记:

hexo new "测试"

  对“测试.md”利用markdown编辑器编辑,

hexo generate //生成html静态文件

  登陆即可访问:

到目前为止,博客的操作都限定在本地,下面梳理一下网页访问的操作。

感兴趣也可以给博客。

  C-网页访问

新建github的repo,具体可以。

修改_config.yml中的develop,

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:      type: git      repo: https://github.com/用户名/用户名.github.io.git      branch: master

然后,通过 npm install hexo-deployer-git --save 安装部署插件,并进行部署 hexo deploy。

至此一个基本的博客搭建完毕,别人也可以通过网络访问。

三、文档管理

hexo g:更新文档

hexo d:部署到博客上

hexo s:部署到本地

如果想删除文档:./source/_post/*.md删除即可,然后hexo g \hexo d完成删除。

按照自己的设想,博客至少需要以下几个功能:

  1. 基本操作:修改个人信息、文件分类
  2. 图片插入
  3. 音频输入:记录自己的一些朗读
  4. 支持超链接:引用关于某本书、某个电影的相关文档
  5. 快速检索:文档会比较琐碎,需要支持如:标签、关键词、作者等检索,用Markdown同步到印象笔记,可以解决这个问题,希望最好直接可以在博客进行该操作

目前想到就这些,需要再作补充。

个人信息:具体操作,直接套用。并作简单修改。其实就是添加about页面

hexo new page "about"

  之后在\source\about\index.md目录下会生成一个index.md文件,打开输入个人信息即可

文件分类:利用

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

title: Hello World

date: 2017/6/10 14:46:25
---

以下是预先定义的参数,可在模板中使用这些参数值并加以利用。

---

title: 文章分类
date: 2017-06-10 17:11:24
tags: film
categories: film
comments: false
---

这时有了文章分类,且可以对tag进行搜索:

如果是多个分类呢?按如下方式设置即可:

title: 文章分类

date: 2017-06-10 17:11:24
tags:
- film
- America
categories:
- film
comments: false
---

图片插入

 主要语句:

<div align="center">

...
</div

**...** 部分内容为:`<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />`

例如:

---title: 文章分类date: 2017-06-10 17:11:24tags: - film- Americacategories:  - film comments:  false---#### 插入图片的一般方法利用如下结构:    
... `- 例如
图片插入

如果是本地图片,直接上传没有成功,可以借助生成链接。

音频插入

1-音乐

这个借助网易云音乐的网页版就可以,生成外链

由于是Html语言,可以直接插入到Markdown中,效果如下:

播放音乐。

2-本地音频

网上的音频资料进行录音、或者本地的录音文件,都可以看作本地音频,这一块是自己非常想要的功能,其实自己更想的是自己想什么闭上眼直接说,自动生成文字博客,而后简单排一下版,就记录完成,打算后面摸索实现一下。

直接上传本地文件仍然行不通。由于自己上传的音频通常不大,考虑到持久性选择:

需求完全满足

1)You can upload AIFF, WAVE (WAV), FLAC, ALAC, OGG, MP2, MP3, AAC, AMR, and WMA files.

2)The maximum file size is 5GB.

这个工具真的很棒,不但支持上传文件还支持在线录音。

点击share

复制绿框中的代码即可,窗口大小是可调节的:

超链接: 

[图床](http://jiantuku.com/#/)

  效果:

可以参考这里。

检索:模板中已兼备,修改可。

至此完成了个人的博客搭建。

转载于:https://www.cnblogs.com/xingshansi/p/6974267.html

你可能感兴趣的文章
use zfs snapshot rollback postgresql's primary to old status in PG HA
查看>>
btrfs 使用指南 - 1 概念,创建,块设备管理,性能优化
查看>>
Android Studio 3.0 上 Gradle 改动
查看>>
[Vue]1-5. Vue.js核心知识之组件化
查看>>
链表(二)
查看>>
重学前端之 让人心态爆炸的this到底是个什么玩意
查看>>
阿里云服务器ECS 3年 279元
查看>>
lamp组合详解
查看>>
Android 自定义View基础(一)
查看>>
新锐时代(北京)网络科技有限公司拖欠工资
查看>>
(四)构建springmvc+mybatis+dubbo分布式平台-maven代码结构
查看>>
去掉键盘的方式
查看>>
css代码规范
查看>>
深入理解Spring系列之三:BeanFactory解析
查看>>
推荐几款超好用的Android Stuido插件
查看>>
C#实现.Net对邮件进行DKIM签名和验证,支持附件,发送邮件签名后直接投递到对方服务器(无需己方邮件服务器)...
查看>>
为什么要写这一系列的博客
查看>>
Vue学习(一)过滤器以及padStart和padEnd
查看>>
js清除所有的cookie
查看>>
从实例中了解动态规划的基本思想
查看>>