开发者社区> jslin_> 正文

少撸两局教你搭个博客玩

简介: 是不是羡慕别人都有自己的博客啊,是啊我也特别羡慕 。。。可以有个属于自己的地址,在上面敲敲写写。 然后自己开始捣鼓 折腾 最后成功了还是很开心。。。 接下来的博客模式是用 HEXO+Github 下面介绍下什么是 Hexo : 它是一个快速、简洁且高效的博客框架。
+关注继续查看

是不是羡慕别人都有自己的博客啊,是啊我也特别羡慕 。。。可以有个属于自己的地址,在上面敲敲写写。
然后自己开始捣鼓 折腾 最后成功了还是很开心。。。
接下来的博客模式是用 HEXO+Github
下面介绍下什么是 Hexo :
它是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

官方文档 : https://hexo.io/
目录结构:

img_3c3f4075306a392a0fbbb8e3ebd5615a.png
目录结构介绍

想要了解Hexo 原理的可以看下这个
hexo原理浅析

下面我们开始搞事情:
1.搭建环境准备(包括node.js和git环境,gitHub账户的配置)
2.安装Hexo
3.配置Hexo
4.怎样将Hexo与github page 联系起来
5.怎样发布文章
6.主题 推荐

搭建环境准备

node 安装
下载地址:
   [Windows Installer 64-bit](https://nodejs.org/dist/v4.2.3/node-v4.2.3-x64.msi)
 [Windows Installer 32-bit](https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi)
git 安装
gitHub 账户配置

node 安装很简单 直接下载安装就行了,检验是否安装成功:打开cmd

img_d6393085bfa14a20f819daf2235e2cc3.png
查看node版本

配置Git环境:

这个是我的百度云分享的链接GitHub
安装的时候可以选择Git Bash 或 CMD 操作 选择CMD的话 每次 调git的话 就不用 git bash here 了 也很方便。
查看git版本:git --version

img_f03db13d7440ead801e7f22d55056ad9.png
git

能够查看到版本号 说明已经安装成功。

github账户的注册和配置:
没有的话就去注册一个: GitHub
不会玩的看下这个教程:廖雪峰Git教程
有账号的话 新建一个仓库

img_eb0aa54e6f59c839763e7b2b260d23a1.png
新建仓库.png

填写仓库名,勾选 Initialize this repository with a README
然后点击创建!

img_4642215099fe193e8a618238a4b64930.png
仓库的创建

创建完成后,然后开启gh-page功能。

img_90a3e1f13525c4fb32ea5e5f3b2abf46.png
点击仓库中的setting

下拉选择 分支 master branch

img_7a60d227db68ee5e72cd00fcf932e8fd.png
下拉选择

点击保存的时候 会生成一个 GitHub pages 网址

img_149bece3ed3318697a96033b7e154cb6.png
GitHub pages
img_146fca747ea23819fe707cc8158c67bd.png
网站内容

这个就是属于我们自己的网站了 是不是很开心...
要让他好看点 有丰富的内容 下面就是Hexo出场...

img_fc930e7bd056c9a51170ff7dbe97e356.gif
开心

安装Hexo

新建文件夹 然后进入这个文件夹 右键 git bash here 如果你装的是cmd 直接用系统的CMD 玩就行了。

img_4174ed58a6ab859b5d516f5a462b016d.png
image.png

安装Hexo依赖

npm install hexo-cli -g

然后install组件

npm install hexo --save

查看版本:

hexo -v
img_ec9a097eaf0cd6dd572fdb0b6eb959ae.png
安装成功

配置Hexo

用hexo 命令 新建文件夹

hexo  init jslin

img_61f9f7f6803017f87b5eb932e701bade.png
init

填坑: 当你在进行hexo 操作时 都是报不是 命令时,确认下是不是用hexo init 创建的文件 用这个命令 创建文件 可以配置 我们的 package.json 文件 当我们npm 时可以安装对应包文件。
img_c2ee4ca9630ff2ed787dd87019511897.png
error

进入你新建的文件夹

img_b34fad3f4c381353588afd937d29a8ea.png
新建的文件

然后 安装 npm包

npm install

生成

hexo g

启动服务预览

hexo s

也可以一步生成

hexo s -g

hexo常用命令

当完成上面操作时会提示:

img_604e44732fa0da63fb88f3bd566f078f.png
success

到浏览器中打开这个链接: http://localhost:4000/
Amazing!!! 开心吧 我们的模板已经生成了。

img_139b118541d319619b33eccb4167e0b3.gif
美美的紫霞仙子献上

熟悉的Hello World !!!


img_83261839da6bd30aa99444c9738b0095.png
Hello World

让我们的Hexo 和 github page 关联起来

大概分为以下几步

  • 配置git个人信息
  • 配置Deployment

如果是第一次的话 :

git config --global user.name "XXX"
git config --global user.email "XXX@XXXcom"

检查是否有SSh ,如果没有的话 在gitHub上新建一个

cd ~/.ssh

然后输入ls 查看

ls

我这里设置了 会出现这两个文件

img_d71dc179ec88708db62d7ad8bfc63f4c.png
SSH

生成新的秘钥

ssh-keygen -t rsa -C "XXX@XXXcom"

一直按回车
将SSH Key添加到ssh-agent,执行命令

eval $(ssh-agent -s)

返回agent的Pid:

img_cce036c7d62556f567a7a51681585e8c.png
pid

执行命令:

ssh-add ~/.ssh/id_rsa

添加成功 返回路径:

img_841462b0b09d88936a0255b4c2db377c.png
id_rsa

然后在自己的git上 添加SSH 秘钥


img_22fa84d505f9f6cafb1119f499c7f64e.png
git

把秘钥文件 id_rsa copy到这里

git上添加SSH Key


img_468aa98b0e262f10cededd11bc1bf054.png
add_sshKey

验证ssh连接:

ssh -T git@github.com
img_612c6b1bda04e245d966b9f3390868b4.png
hello

ok ssh 到这里我们配置成功了,然后配置下 config.yml文件的Deployment

img_251396781507436a23d787f28df1757f.png
config.yml
img_67e55ec20d68eeaa64f39e877cc6e1fc.png
Deployment
deploy:
  type: git
  repo: git@github.com:JslinSir/Jslin.git
  branch: master

填坑:

这里设置好了Deployment 一定要

npm install hexo-deployer-git --save

不然的话在生成和部署的时候会报错 坑已经踩过了


img_61abd3819285e74cc54d35505c1ca766.png
error
img_75814be91a94f12154bee981e6c9ccc2.gif
别再踩喽

接下来就是 配置我们的Hexo 主题
要不然这样也太丑了吧。。。

img_79fcdd6b38019d94d888b8c7b7f1a889.png
Hexo

我用的是yilia主题 感觉这个简洁 挺好用的 看下效果
img_d132d0cc6cf79a6cc72a109677db2c1b.png
美美的紫霞

关于主题的设置

这里配置你要是使用的主题,如果你也想使用yilia主题的话 clone这个

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
img_5613cc73b087de5cd5ec41ac36db3580.png
image.png

设置完主题 部署到git上:

hexo d -g

开启服务

hexo s

断断续续折腾了两天,这个博客还存在着问题,点击详情头像不显示问题,菜单还没有布局,还有些404页面还未设置 走到这已经很开心了,加油继续完善!

img_23ddbbd85a109b7c08a7bdb5dd6f4f0e.gif

把生命浪费在折腾上,和美丽的代码上... 博客地址ClickMe

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
13826 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32791 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18018 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24817 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19756 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21548 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
18655 0
+关注
55
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载