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

我的成果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. iOS 网络缓存总结

    一.缓存策略: 1.缓存策略的配置: 缺省缓存策略的存储策略需要服务器的响应配置: 缺省缓存策略的使用需要请求端的配置: 2.缓存策略的缺陷: 移动端比较通用的缓存策略是先使用缓存同时更新本地数据: ...

  2. zookeeper 快速入门

    分布式系统简介 在分布式系统中另一个需要解决的重要问题就是数据的复制.我们日常开发中,很多人会碰到一个问题:客户端C1更新了一个值K1由V1更新到V2.但是客户端C2无法立即读取到K的最新值.上面的例 ...

  3. jdk8环境下,添加重复注解的美好体验

    为了实现业务层缓存,定义了几个注解:@Cache.able.@Cache.put.@Cache.del 分别实现对业务方法的 缓存检测.缓存插入 和 缓存清除. public @interface C ...

  4. ElasticSearch学习之——基本的文档CURD

    一.文档的添加 POST http://127.0.0.1:9200/{index}/{type}/{id} { "key":"value", "ke ...

  5. python面试题库——1Python基础篇

    第一部分 Python基础篇(80题) 为什么学习Python? 语言本身简洁,优美,功能超级强大,跨平台,从桌面应用,web开发,自动化测试运维,爬虫,人工智能,大数据处理都能做 Python和Ja ...

  6. react中受控组件相关的warning

    在表单中,报如下的错,意思是非受控的输入框变成了受控的,报错信息如下 Warning: A component is changing an uncontrolled input of type te ...

  7. pandas数据结构:Series/DataFrame;python函数:range/arange

    1. Series Series 是一个类数组的数据结构,同时带有标签(lable)或者说索引(index). 1.1 下边生成一个最简单的Series对象,因为没有给Series指定索引,所以此时会 ...

  8. 【Potplayer】视频播放器

    Potplayer——视频播放器

  9. ubuntu下安装eclipse IDE for C/C++ developers

     序 linux的GUI和windos比起来实在逊色,虽然它的终端模式(命令行模式)非常强大.linux发行版ubuntu的GUI相对其他版本要华丽一些,所以最近由redhat转向ubuntu进行li ...

  10. Python连接MySQL数据库执行sql语句时的参数问题

    由于工作需要,今天写了一个Python小脚本,其中需要连接MySQL数据库,在执行sql命令时需要传递参数,结果出问题了.在网上查了一下,发现有以下几种方式传递参数: 一.直接把sql查询语句完整写入 ...