hexo搭建github.io博客

简介: hexo搭建github.io博客

Introduction


回顾一下我三年搭建博客的历程,最初是选择wordpress,Wordpress全部由php编写,数组库采用MySQL。优点:用户只需要将Wordpress的源代码复制到网站根目录下,然后访问网站,之后的安装操作全部在浏览器上完成。即使不是软件行业的人,也可以在几分钟之内完成安装工作。甚至很多虚拟主机供应商都提供了Wordpress的一键式安装工具。用户连上传文件的步骤都省了。缺点:项目太臃肿了,Wordpress耗损CPU严重,不容易操作,运行稍慢。尤其是后期文章数目较多的时候,想要登陆下网站的管理后台,心态简直是抓狂的。loading了好久,有时候还会失败,发一篇文章也很费劲,索性就不维护了。 后来在github网站上找到一个vue模板:github地址和demo预览二次开发了一下,的确是实现了很多功能,也挺轻便的,样式也可以自定义,博客可以直接写在github的issue,很方便,用了三个月后才发现百度的搜索引擎居然只收录了首页,搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对seo并不友好。而且github api在国内访问速度也没有想象中那么快,可能是github的CDN被墙屏了。 使用github.io可以搭建一个自己的博客,把静态文件项目托管到github上,可以写博客,可以使用markdown语法,也可以展示作品.灵活性高.但是有较大的难度,但是这对于一个熟悉git操作的前端开发工程师来说,都不算什么的。重点是hexo和github.io的域名和服务器都是免费的。当然也可以选择用自己的服务器和域名。


### Quick Start #### 安装 node,git,注册好github账号 (网站有很多教程,安装方法这里就不详细展开了,注意:github账号用户名一定不能有大写.)

#### 安装hexo:npm install-g hexo


创建hexo文件夹:


cmd窗口切换到对应的目录下,然后执行: hexo init也可以在 E:\hexo 下右键,选择git bash,在窗口中执行 hexo init自动安装了需要的文件.


安装依赖:


继续执行: npm install


完成本地安装:


继续在 E:\hexo 下执行: hexo generate

继续执行: hexo server

然后在打开浏览器 localhost:4000 ,就可以看到,本地已经安装好了.


在github上创建博客仓库:


8596a5e848f0e0e37c8071e27c988f53_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png跳转的后如下填写:(其中Repository name的格式是 '用户名'.github.io ),然后点创建仓库,Repository name必须和用户名(Owner)一致,不能有大写字母2c5e4611fb5cfa97e44d2115938216ff_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg586562f8ef18085f00ef57ebe57d0d60_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png


创建SSH keys


监测是否有已经存在的SSH keys:

打开 git bash 终端(可以在 E:\hexo 下右键打开,也可以直接在开始菜单里打开)

执行: $ ls-al~/.sshbae6857bb45398b6011d4dbcfd485b0b_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

如果没有的话,就生成一个SSH keys: 写自己的邮箱
$ ssh-keygen-t rsa-C"your_email@example.com"

然后会出现:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/you/.ssh/id_rsa):

就是让你输入SSH keys要保存在哪里,一般不用改,就直接回车就好了.输入一个密码,这个密码后面会用到,所以要记住咯

保存SSH keys:

创建成功后,他会提示你SSH keys保存在哪里:

Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
找到SSH keys:

根据上一步里告诉你的路径,找到保存SSH keys的地方,我的是在 C:\Users\2000104591.ssh

其中 id_rsa.pub 就是SSH keys 如果为了防止以后找不到,可以把他们自己另存到其它地方


为github仓库添加SSH keys


然后把创建的id_rsa.pub里的内容复制到Key里去,Title部分随便填. 点击'Add key'

添加的过程中,还要再输入一次github的密码93bd942d23efa07b3236c76d54ae78df_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


配置_config.yml文件并发布:


E:\hexo(文件根目录下) 下,有一个文件叫 _config.yml ,打开它,拉到最底下,做如下修改: 

然后再执行:

hexo generate
hexo deploy

然后访问: https://ye63.github.io/ (用户名改成自己的),就可以看到了.


快捷命令


hexo 新建一篇文章给它添加分类和标签:
hexo new "移动端限制input框只能输入数字"
通过mou编辑器打开:添加tags和categories
---
title: title #文章標題
date: 2016-06-01 23:47:44 #文章生成時間
categories: "Hexo教程" #文章分類目錄 可以省略
tags: #文章标签 可以省略
     - 标签1
     - 标签2
description: #你對本頁的描述 可以省略
---
发布
hexo clean && hexo g && hexo d
创建新页面
hexo new page "about"

目录
相关文章
|
6月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
6月前
|
缓存 开发工具 git
如何修改github博客主题
如何修改github博客主题
|
21天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
21 2
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
5月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
70 0
|
5月前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
170 1
|
6月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
172 0
|
5月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
88 0