教你如何使用hexo以及nginx、github搭建属于自己的博客(妈妈级教学)

~~

1.解释一下你要的服务器的效果以及对应的操作

~~
首先你要有自己的一台服务器,可以是云服务器,或者你可以用自己的电脑作为服务器,(windows也可以的
(1)你有自己的windows(或者linux)
安装hexo以及nodejs即可实现在github上可以访问的远程管理的blog
(2)你有租了服务器
安装hexo以及Nodejs,你可以在服务器上创建博客 的同时再将blog远程传到github的blog仓库,这样你就有两个平台.

2.我的平台情况,以及我对你的建议(妈妈级教学,认真看一下你是可以完成自己对应情况的)

ubuntu18.04服务器,github平台
所以我有两种方式访问我的blog:
(1)github 仓库

(2)服务器访问(nginx挂载):
如果不用服务器,就不需要考虑nginx的事情

(1)你不搞服务器,那就直接在你的pc上做下面相同的操作,与nginx相关的都不用管
(2)你搞服务器,那你跟着来,如果你不是ubuntu,是其他的服务器类型,你只需要 去百度一下做相同操作的指令就可(如果你是大佬,请你忽略我说的话),不要太懒

3.安装nodejs,hexo

windows的话,就搜一下怎么安装nodejs和hexo就行

ubuntu指令如下

--- #安装Nodejs
node -v #查看node版本
npm -v #查看npm版本
npm install -g cnpm --registry=http://registry.npm.taobao.org #安装淘宝的cnpm 管理器
cnpm -v #查看cnpm版本
cnpm install -g hexo-cli #安装hexo框架
hexo -v #查看hexo版本

4.创建blog

记得ubuntu的nginx是默认挂载`/var/www/html`目录的,

你可以在任意目录创建自己的blog目录,我是在/var/www/目录创建的一个目录叫hexo

cd /var/www
mkdir hexo
cd hexo
sudo hexo init #生成博客 初始化博客
hexo s #启动本地博客服务
http://localhost:4000/ #本地访问地址

这些是初始化hexo生成的目录,待会儿会解释你需要哪些

你可以访问http://localhost:4000/看到一个基本的hexoblog模型

5.写blog

(1)你可以使用CSDN的markdown编辑器进行编辑,导出md文件,然后再传到ubuntu上,
(2)或者你也可以直接使用markdown语法进行编写,具体的语法你需要自己去学

我给一个md文件的例子

---
title: test2
date: 2020-08-27 16:39:26
tags:
---
**this is a test2**

其中****表示的是加粗,类似这样,最终将文件保存为md文件,可以直接导入各个平台写文章
我这里教你怎么用md文件,如果你想直接用hexo使用markdown语法写,我举个例子如下:

hexo n "我的文章" #创建新的文章

之后hexo会在public/_posts目录下自动生成我的文章.md文件,这跟你把md文件直接复制到public/_posts是一样的。都是要对md文件进行编辑

6.生成blog

当/var/www/hexo/public/_posts文件夹中有md文件时,你可以通过以下命令生成blog:

#返回hexo目录
hexo clean #清理
hexo g #生成
hexo s #预览,你可以在这里预览自己的blog生成情况

7.配置github

#Github创建一个新的仓库 ‘你的github名字.github.io’


然后

cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件

我这里的blog目录就是/var/www/hexo,你的是你自己指定的目录

然后配置_config.yml


.
.
.
打开编辑_config.yml
对于deploy字段,修改如下:

-----
deploy:
type: git
repo: https://github.com/你的github名字/你的github名字.github.io.git
branch: master
-----

完成保存
使用命令hexo deploy部署blog到你的github项目
https://你的github名字.github.io/ #访问这个地址可以查看博客

重点来了(踩坑教学)

修改_config.yml注意两点,要想你的blog兼容各种主题以及不会出现两篇文章跳转到同一个目录的情况,注意以下:
(1)url以及root的配置

url设置为github给你分配的访问域名,就是你的github主页地址
root设置为你的仓库名称(刚才设置的是 ‘你的github名字.github.io’
只有这样,你的blog才会正确的展现

(2)permalink的配置

这个是标记你的每一篇博客,即每个md文件 生成的链接,这里我是用title作为链接,你可以用其他的,比如日期 ,但是一定要记住,在最前面加上一个“:”

比如permalink: :title/ 而不是permalink: title/

不然你的blog会全部跳转到/title目录下

至此,你的github链的blog就完成了
.
.

8.nginx服务器配置blog渲染hexo

这里就是开始你的服务器作为blog的载体的情况,
首先,修改nginx的配置文件

首先,在conf.d文件目录中创建新文件:default.conf,内容为:

server {# 监听端口listen 80;# 监听ip 换成服务器公网IP# server_name mr-lin.site;location / {root /var/www/hexo/public;index index.html;}location ~ .* {#proxy_pass http://xd-project;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}


好的,这样就可以了,记得,其中的root改为你的blog地址/public才可以,我这里的blog地址是/var/www/hexo,明白?

然后重启nginx服务,就可以通过公网ip或者域名访问你的服务器80端口来访问blog了。

教你如何使用hexo以及nginx、github搭建属于自己的博客(操心的妈妈级教学)相关推荐

  1. Pelican + Github 搭建自己的静态博客

    //想了解更多请访问我的新网站:Techwhims Techwhims.com 之前在Github上使用基本的jekyll模板搭建过一个博客,但是那时候前端技术的水平有限,搭出来的博客很不好看,一些基 ...

  2. HEXO+Github,搭建属于自己的博客

    hexo是一款基于Node.js的静态博客框架, hexo github链接 ,这篇教程是针对与Mac的,参考链接,由于原文讲到的hexo是以前的老版本,所以现在的版本配置的时候会有些改动. 之前是想 ...

  3. 【保姆级】利用Github搭建自己的个人博客,看完就会

    大家好,我是辰哥~ 作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑.易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台. ...

  4. 使用 Github Pages 和 Hexo 搭建自己的独立博客【超级详细的小白教程】

    欢迎关注我的专栏:<个人博客搭建:Hexo+Github Pages>,从搭建到美化一条龙,帮你解决 Hexo 常见问题! 推荐阅读:<Hexo 博客优化之博客美化系列(持续更新)& ...

  5. 使用Github Pages和Hexo搭建自己的独立博客【超级详细的小白教程】

    文章目录 ● 前言 ● 入门 ● 安装 Node.js ● 安装 Git • 检验Git是否安装成功 ● 安装Hexo • Hexo 初始化配置 ● 本地查看效果 ● 将博客部署到 Github Pa ...

  6. 使用Hexo+Github一步步搭建属于自己的博客(基础)

    使用Hexo+Github一步步搭建属于自己的博客(基础) 转载于:https://blog.51cto.com/tenderrain/2312450

  7. 使用github+Hexo人人都能拥有一个美美的博客

    我相信很多人都想拥有一个自己的博客,把自己的一些生活感想或者学习总结写到这上面分享给大家.首先我推荐一个网站简书,无论你是否是搞技术开发工作的或者其他文艺工作者,只要你想写文章,简书无疑是一个好的写文 ...

  8. 基于Hexo和Github的炫酷个人博客(进阶篇)

    基于Hexo和Github的炫酷个人博客(基础篇) 基于Hexo和Github的炫酷个人博客(进阶篇) 网页底部加上浏览量 打开/themes/next/layout/_partials/footer ...

  9. 基于Hexo和Github的炫酷个人博客(基础篇)

    什么是hexo Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.       本文采用最新的Hexo版 ...

最新文章

  1. JAVA-retry 重试
  2. php酒店预定,php酒店查询预约系统
  3. 【数据结构与算法】之深入解析“修剪二叉搜索树”的求解思路与算法示例
  4. Spring (Bean, IoC, AOP, SpringMVC)
  5. VCL组件之TScrollBar
  6. Python存储和读取数据
  7. 爬虫python能做什么-总算发现python爬虫能够干什么
  8. MacOS平台上编译 hadoop 3.1.2 源码
  9. Powershell下设置环境变量
  10. 霍尼236主机说明书_霍尼韦尔236系统中文说明.DOC
  11. 计划制定与管理-日事清
  12. 网络基础虚拟化VRRP/MSTP冗余技术
  13. All in!马斯克出价430亿美元收购Twitter全部股份,还有B计划
  14. 什么样的产品可以做为引流款?请选择这些产品作为引流爆款
  15. 9.11 myl模拟赛
  16. Java面向对象基础练习
  17. I lost my spoon
  18. openlayers 计算绘制的矢量多边形的面积 (getArea方法)
  19. 微信小程序获取手机号码第一次失败第二次成功的解决方案
  20. 无线路由器首次配置、修改WiFi名称和密码—— Cisco实验/家里实验

热门文章

  1. hive 2.3 mysql_Note23:Hive-2.3.6安装配置
  2. MD5 算法描述及实现
  3. android 格式化分区,Android FAT分区格式化
  4. java apktoo_apktool.jar
  5. 软件工程 Beta 阶段 团队贡献分数
  6. IOC操作Bean管理XML方式(bean的作用域)
  7. java设计模式初探之装饰者_JAVA设计模式初探之装饰者模式
  8. java音频采样_音频重采样的坑
  9. Java常见面试题之类的加载过程
  10. 东电计算机考研大概分数,2019年各学院硕士研究生拟录取名单公示