搭建好看的静态博客(使用Hexo进行搭建)
经常看到大牛的博客非常的高大帅气,虽然我很渣,但是逼格不能输,所以有了以下的搭建记录。
我的成果ninwoo,喜欢的可以参考下面的记录一起来动手搞起来。
安装Git Bash
访问git下载最新版本的git bash
安装完成之后,右键打开git bash,设置用户名和邮件信息
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
生成ssh秘钥文件
ssh-keygen -t rsa -C "GitHub注册邮箱"
直接三个回车即可,默认不需要设置密码。
查看生成的公钥
cat ~/.ssh/id_rsa.pub
复制内容,打开github setting keys界面,创建新的SSH key,并粘贴公钥到Key输入框中。
在git bash中测试是否配置成功
ssh git@github.com
出现:
PTY allocation request failed on channel 0
Hi Ninwoo! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
证明设置成功。
创建GitHub仓库
创建新的仓库,仓库名为[用户名].github.io,用户名用Github名称代替。
这样做的主要目的就是为了以后可以通过该网址进行访问你的博客主页,所以要仔细设置。在这里,我配置成Ninwoo.github.io
以下的配置中,也需要对应修改为你自己的仓库名。
安装Node.js
访问Node.js官网下载安装包。
下载完成后,点击安装。打开CMD查看是否安装成功。
C:\Users\ljo04>node -v
v8.12.0
C:\Users\ljo04>npm -v
6.4.1
如果上述命令均正常通过,则安装完成。
安装Hexo
1.创建一个新的文件夹作为Hexo的开发目录,这里我命名为Hexo_project
E:\project>mkdir Hexo_project
2.使用npm安装Hexo
为了提高安装速度,先配置淘宝npm镜像
E:\project\Hexo_project>npm config set registry https://registry.npm.taobao.org
3.安装Hexo
E:\project\Hexo_project>npm install -g hexo-cli
4.初始化hexo
E:\project\Hexo_project>hexo init blog
INFO Cloning hexo-starter to E:\project\Hexo_project\blog
Cloning into 'E:\project\Hexo_project\blog'...
remote: Counting objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 67
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'E:/project/Hexo_project/blog/themes/landscape'...
remote: Counting objects: 838, done.
remote: Compressing objects: 100% (6/6), done.
Receiving objects: 26% (222/838), 292.01 KiB | 88.00 KiB/s
这个过程可能需要等待一阵时间
5.测试站点是否创建成功
# 创建一篇博客test
E:\project\Hexo_project\blog>hexo n test
# 生成博客
E:\project\Hexo_project\blog>hexo g
# 启动服务器预览
E:\project\Hexo_project\blog>hexo s
这时,可以打开浏览器访问http://localhost:4000/,查看blog界面,发现已经创建好新的文章test。
推送至网站
1.修改blog配置文件E:\project\Hexo_project\blog\_config.yml
deploy:
type: git
repo: git@github.com:Ninwoo/ninwoo.github.io.git
branch: master
注意:这里repo要选择ssh的git库链接,否则会在部署的时候报错
2.安装Git部署插件
E:\project\Hexo_project\blog>npm install hexo-deployer-git --save
3.部署博客
E:\project\Hexo_project\blog>hexo clean
E:\project\Hexo_project\blog>hexo g
E:\project\Hexo_project\blog>hexo d
4.测试是否部署成功
现在访问https://ninwoo.github.io/ ,如果出现blog界面这证明部署成功。
更换主题
如果觉得默认主题实在是太丑,可以更换其他主题,下面的教程中,我选择Next主题。
1.下载主题
E:\project\Hexo_project\blog> git clone https://github.com/theme-next/hexo-theme-next themes/next
2.打开配置文件E:\project\Hexo_project\blog\_config.yml更换主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
plugins: hexo-generate-feed
3.重新部署blog
E:\project\Hexo_project\blog>hexo clean
E:\project\Hexo_project\blog>hexo g
E:\project\Hexo_project\blog>hexo d
小节
到这里,高端大气上档次的Blog就创建完成了,读者可以开始编写自己的blog啦!
搭建好看的静态博客(使用Hexo进行搭建)的更多相关文章
- Docsify+腾讯云对象存储 COS,一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
- Hexo搭建 github.io 静态博客使用指南
What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...
- 使用vuepress搭建GitHub pages静态博客页面
vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...
- Github、Jekyll 搭建及优化静态博客方法指南
尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...
- 用hexo在github上搭建自己的静态博客
在自己的小站上发过一次,这边就不再多发一次了,直接给链接好了: http://nerohwang.github.io/2014/02/11/simple-test/
- 转--利用hexo搭建个人静态博客
引用地址 可谓图文并茂,可以配合 七牛云存储(做图片等文件服务器),搭建好看的个人博客 hexo 官方指导文档 主题 官网教程 问题集锦 简书 http://blog.csdn.net/wx_9624 ...
- 基于mkdocs-material搭建个人静态博客
基于mkdocs-material搭建个人纯静态博客,没有php,没有mysql 如果你只是想安安静静的放一些技术文章,发布到个人站点或github-pages,mkdocs-material很适合你 ...
- Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- hexo搭建静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
随机推荐
- 【CodeChef】Prime Distance On Tree
vjudge 给定一棵边长都是\(1\)的树,求有多少条路径长度为质数 树上路径自然是点分治去搞,但是发现要求是长度为质数,总不能对每一个质数都判断一遍吧 自然是不行的,这个东西显然是一个卷积,我们合 ...
- ResultJsonInfo<T>
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace QY.We ...
- Windows下docker的安装,将ASP.NET Core程序部署在Linux和Docker中
参考文章: https://www.cnblogs.com/jRoger/p/aspnet-core-deploy-to-docker.html docker for windows下载连接: htt ...
- C#在WinForm中重写ProgressBar控件(带%的显示)
废话少说,直接上码: namespace csPublish { [ToolboxItem(true)] class textProgressBar : System.Windows.Forms.Pr ...
- PAT乙级1001
https://pintia.cn/problem-sets/994805260223102976/problems/994805325918486528 #include<bits/stdc+ ...
- Linux文件系统测试工具
一.文件系统测试工具简介 1.LTP 参考网站:http://oss.sgi.com/projects/ltp/ LTP(Linux Test Project)是由SGI和IBM联合发起的项目,提供一 ...
- nodeJs搭建简单服务器
实现简单的例子:hello word 把第一个文件命名为server.js 在server.js里写入 var http = require("http"); http.crea ...
- Java静态方法块、非静态方法块、构造方法、静态方法执行顺序
示范类StaticTest.java public class StaticTest { {//只有当创建对象的时候执行 System.out.println("H1 ...
- 利用js编写一个简单的html表单验证,验证通过时提交数据(附源码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 深入理解PHP 数组之count 函数
count()PHP count() 函数用于计算数组中的单元数目或对象中的属性个数,返回数组的单元个数或对象中的属性个数.语法:int count( mixed var [, int mode] ) ...