利用Github+Hexo轻松搭建个人博客

xiaoxiao2021-02-28  69

利用Github+Hexo轻松搭建个人博客

准备工作

需求

申请一个域名,搭建一个博客站点。别人可以通过该域名访问我们发布的博客等不需要我们维护服务器,我们只需要关注发布内容,极大降低技术要求

分析

Github:github提供gh-pages服务是免费的,可以为我们提供存储服务 Hexo : 一个快速,简单且功能强大的博客框架,帮助我们快速简单的搭建个人博客 MarkDown :是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式

技能提高

html+css+javascriptgit基本语法markdown语法node.js

软件安装

以下为windows环境,其他环境安装软件、命令自行查询。已安装过的用户略过。

下载安装Git

下载安装Node.js

安装Hexo

在安装git后,在任意位置点击鼠标右键,选择Git bash(我在D盘下新建Hexo文件夹后并点击鼠标右键操作) 安装hexo npm install -g hexo 创建hexo文件夹 hexo init 安装依赖包 npm install 启动hexo并测试 hexo server

启动之后,打开浏览器,在地址栏输入:http://localhost:4000,你会看到Hexo的示例页面。

各种账号申请

已有的请直接跳过,我们将申请的各平台账号有:

Github,博客托管网易云跟帖 ,博客的评论系统(2017/08/01停止服务)百度统计,域名的访问统计LeanCloud,统计文章阅读量

GitHub申请注册

输入账号、邮箱、密码,然后点击注册按钮.

创建页面仓库

这个仓库的名字需要和你的账号对应,格式: yourname.github.io 输入基本信息,然后点击创建仓库. 注意 命名规则:你的github账号.github.io

查看SSH

SSH 公钥默认储存在账户的主目录下的 ~/.ssh 目录。 进入.ssh 目录下,命令行: ls 查看,如果返回: something 和 something.pub ,说明已经有SSH 公钥。

生成SSH密钥

没有的话,生成,还是在.ssh目录下,命令行: ssh-keygen -t rsa -C “你的邮箱地址”,按3个回车,密码为空。

在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。

其他平台账号到后面在使用

Hexo初体验

使用next主题,强烈推荐按照官方文档操作,能完成你大部分的需求 http://theme-next.iissnan.com/getting-started.html

目录结构

├── .deploy #需要部署的文件 ├── node_modules #Hexo插件 ├── public #生成的静态网页文件 ├── scaffolds #模板 ├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主题 ├── _config.yml #全局配置文件 └── package.json

全局配置 _config.yml

# Hexo Configuration # Docs: http://hexo.io/docs/configuration.html # Source: https://github.com/hexojs/hexo/ # Site #站点信息 title: #标题 subtitle: #副标题 description: #站点描述,给搜索引擎看的 author: #作者 email: #电子邮箱 language: zh-Hans #语言 # URL #链接格式 url: #网址 root: / #根目录 permalink: :year/:month/:day/:title/ #文章的链接格式 tag_dir: tags #标签目录 archive_dir: archives #存档目录 category_dir: categories #分类目录 code_dir: downloads/code permalink_defaults: # Directory #目录 source_dir: source #源文件目录 public_dir: public #生成的网页文件目录 # Writing #写作 new_post_name: :title.md #新文章标题 default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿) titlecase: false #标题转换成大写 external_link: true #在新选项卡中打开连接 filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false highlight: #语法高亮 enable: true #是否启用 line_number: true #显示行号 tab_replace: # Category & Tag #分类和标签 default_category: uncategorized #默认分类 category_map: tag_map: # Archives 2: 开启分页 1: 禁用分页 0: 全部禁用 archive: 2 category: 2 tag: 2 # Server #本地服务器 port: 4000 #端口号 server_ip: localhost #IP 地址 logger: false logger_format: dev # Date / Time format #日期时间格式 date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/ time_format: H:mm:ss # Pagination #分页 per_page: 10 #每页文章数,设置成 0 禁用分页 pagination_dir: page # Disqus #Disqus评论 disqus_shortname: # Extensions #拓展插件 theme: landscape-plus #主题 exclude_generator: plugins: #插件,例如生成 RSS 和站点地图的 - hexo-generator-feed - hexo-generator-sitemap # Deployment #部署,将 lmintlcx 改成用户名 deploy: type: git repo: 刚刚github创库地址.git branch: master

发布博客

新建MarkDown 文件放在hexo\source_posts 下

常用的命令有

hexo help #查看帮助 hexo init #初始化一个目录 hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成网页,可以在 public 目录查看整个网站的文件 hexo server #本地预览,'Ctrl+C'关闭 hexo deploy #部署.deploy目录 hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

本机查看,浏览器输入http://localhost:4000 查看你写的文章

hexo clean hexo g hexo s

推送至GitHub,先安装git插件npm install hexo-deployer-git --save

hexo clean hexo g hexo d

申请域名并绑定GitHub pages

我用的腾讯学生用户送的.cn域名,可以去godaddy购买,可以使用支付宝,具体可以百度。

以腾讯.cn域名示例,假设你已完成域名购买。

首先我们需要知道自己github pages的IP。电脑打开cmd ping yourname.github.io 你就可以看到ip了。

然后在腾讯云的域名管理中设置域名的解析服务,添加记录。一个A类型,一个CNAME类型

完成绑定

方法一:在站点source目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如xxx.cn 方法二:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如xxx.cn

提交更新,这样我们就可以通过域名访问自己的博客了

网易云跟帖

注册完成后,获取通用代码

把next主题中的gentie_productKey 后填入productKey的值即可,其他不需要修改。

参考资料

NexT手把手教你建github技术博客by hexoHEXO搭建个人博客为NexT主题添加文章阅读量统计功能Hexo-NexT搭建个人博客(三)如何搭建一个独立博客——简明Github Pages与Hexo教程

本文地址:http://blog.csdn.net/prodigalwang/article/details/74999822

转载请注明原文地址: https://www.6miu.com/read-83268.html

最新回复(0)