经常看到大牛的博客非常的高大帅气,虽然我很渣,但是逼格不能输,所以有了以下的搭建记录。

我的成果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进行搭建)的更多相关文章

  1. Docsify+腾讯云对象存储 COS,一键搭建云上静态博客

    最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...

  2. Hexo搭建 github.io 静态博客使用指南

    What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...

  3. 使用vuepress搭建GitHub pages静态博客页面

    vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...

  4. Github、Jekyll 搭建及优化静态博客方法指南

    尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...

  5. 用hexo在github上搭建自己的静态博客

    在自己的小站上发过一次,这边就不再多发一次了,直接给链接好了: http://nerohwang.github.io/2014/02/11/simple-test/

  6. 转--利用hexo搭建个人静态博客

    引用地址 可谓图文并茂,可以配合 七牛云存储(做图片等文件服务器),搭建好看的个人博客 hexo 官方指导文档 主题 官网教程 问题集锦 简书 http://blog.csdn.net/wx_9624 ...

  7. 基于mkdocs-material搭建个人静态博客

    基于mkdocs-material搭建个人纯静态博客,没有php,没有mysql 如果你只是想安安静静的放一些技术文章,发布到个人站点或github-pages,mkdocs-material很适合你 ...

  8. Hexo搭建Github静态博客

    1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...

  9. hexo搭建静态博客

    1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...

随机推荐

  1. [WHY]Hello, Worktile~

    本来是水水的去听一听云计算大会,感受一下氛围的, 万万没想到,竟然意外的參观了Worktile,这也成了北京之旅最值得纪念的记忆. 先是路上看到QQ有个好友请求,备注是Worktile市场的小泽. 从 ...

  2. HBase学习之路 (八)HBase大牛博客

    主要是记录一下链接 http://hbasefly.com

  3. php表单笔记

    PHP获取表单值: $_POST    //获取POST提交 $_GET      //  获取GET提交 <!DOCTYPE html> <html> <head> ...

  4. ethereumjs/ethereumjs-account-2-test

    ethereumjs-account/test/index.js const Account = require('../index.js') const tape = require('tape') ...

  5. cocoaPods 创建自己的依赖库

    1.先在github上创建一个仓库 和一般创建一样,就是证书一定要选,我选的是MIT,不要问我因为啥, 我也不知道, 哈哈 2.check到本地或者本地创建,反正最后都要上传到这个仓库,以个人习惯吧 ...

  6. JavaWeb基础—JDBC入门

    一.什么是JDBC JDBC全称为:Java Data Base Connectivity(java数据库连接),它主要由接口组成 二.JDBC原理概述 JDBC原理:其实就是一组规范(就是对类的规范 ...

  7. plsql分页

    分页是任何一个网站(bbs,网上商城,blog)都会使用到的技术,因此学习pl/sql编程开发就一定要掌握该技术.如下图: 1.  编写无返回值的存储过程 首先是掌握最简单的存储过程,无返回值的存储过 ...

  8. 20145209刘一阳《JAVA程序设计》第五周课堂测试

    第五周课堂测试 1.下列关于内部类的说法,正确的是(ABD) A .其他类不可以用某个类的内部类声明对象. B .内部类字节码文件的名字格式是"外嵌类名$内部类名". C .内部类 ...

  9. Silverlight 图表控件 Visifire 常用属性

    主要介绍 Visifire 常用属性的设置,用来生成不同样式的图例 设置Chart的属 //设置title的值 // 创建一个标题的对象 Title title = new Title(); // 设 ...

  10. JavaWeb总结(十一)

    JSP简介 虽然Servlet解决了传统CGI编程的缺陷,但是它并不一定是最高效率的方案 - Servlet的编码.部署和调试任务繁琐 - 生成动态网页繁琐,不利于项目分工 为了弥补Servlet这些 ...