• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 使用Hexo+GitHub搭建个人博客

使用Hexo+GitHub搭建个人博客

作者:Learning 字体:[增加 减小] 来源:互联网 时间:2017-08-27

本文主要包含hexo github博客,github hexo搭博客,hexo github,hexo github 换电脑,github pages hexo等相关知识,Learning希望在学习及工作中可以帮助到您

使用Hexo+GitHub搭建一个属于自己的博客.

准备

注册GitHub账号,并建立新仓库

你需要在 Github 上创建一个属于自己的账户,然后新建一个仓库(new repository),并命名为 YourSiteName.github.io,此时 Github 会帮助你初始化一个静态网页,你可以根据自己的喜好选择一些模版(这都不是重点),接着尝试访问下你所建的站点,成功后就可以开始动工了。

安装Hexo并且初始化博客框架

安装Nodejs和Git

因为,Hexo的安装和搭建依赖于Nodejs和Git。所以先到官网下载Nodejs官网和Git官网进行安装。顺便提供Nodejs百度云和Git百度云的下载连接。

安装Hexo

在上面安装好了NodeJs和Git后,就可以进行Hexo的安装了。Hexo的安装如下

npm install -g hexo-cli

使用Hexo初始化博客框架

$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install

初始化Hexo的博客框架,完成后大概的目录,

├── _config.yml //站点的配置信息,您可以在此配置大部分的参数。
├── package.json
├── scaffolds     //模版文件夹。当您新建文章时,Hexo会根据 scaffold 来建立文件。
├── source     //资源文件夹是存放用户资源的地方。
|   ├── _drafts
|   └── _posts
└── themes     //主题文件夹。Hexo会根据主题来生成静态页面。

新建文章(创建一个Hello World)

hexo new "Hello World"

在/source/_post里添加hello-world.md文件,之后新建的文章都将存放在此目录下。

生成网站

hexo generate

此时会将/source的.md文件生成到/public中,形成网站的静态文件。

生成标签和分类页面

在解决生成标签和分类页面中的参考网址在此记录下来。
* 新建一个页面,命名为 tags 。命令如下:

hexo new page "tags"
  • 编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:
title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"


* 在菜单中添加链接。编辑主题配置文件_config.yml,添加 tags 到 menu 中。如下:

menu:
  home: /
  archives: /archives
  tags: /tags

开启本地服务器

hexo server -p 4000

在浏览器输入http://localhost:4000,查看网站显示。

部署本地站点到GitHub上

在站点配置文件_config.yml中配置你所要部署的站点信息

将下面的youName换成在GitHub上的用户名就好了。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: git@github.com:youName/youName.github.io
    branch: master
配置本地到GitHub的SSH免密钥登录

在实现免密钥登录的时候,参考的博客地址。
* 首先检查电脑上现有的ssh key,打开git bsah,输入命令ls -al ~/.ssh如果不存在就没有关系,如果存在的话,直接删除.ssh文件夹里面所有文件.

  • 输入ssh -keygen -t rsa -C "youziji@qq.com",然后会提示你填写passphrase,一路回车即可。
    Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):(回车就好),
    Enter passphrase (empty for no passphrase):(回车,不需要输入密码)
    Enter same passphrase again:(回车不需要输入密码)
    注意: 因为Hexo的自动部署如果有密码的话会部署失败

  • 输入ssh -agent -s命令。

  • 继续输入ssh -add ~/.ssh/id_rsa,输入之后,在我这里是出错了,不知道你的有没有出错。如何也出错了,就输入:eval `ssh-agent -s` ssh-add即可。
  • 添加SSH key到Github账户。键入以下指令,拷贝Key(先拷贝了,等一下可以直接粘贴):clip < ~/.ssh/id_rsa.pub.在GitHub添加key的过程如下,
    第一步
    第二步
    第三步
    第四步
验证免密钥是不是成功

输入ssh -T git@github.com,如果出现如下图所示,那么恭喜你,ssh key已经配置好了.

安装部署到Github的插件
npm install hexo-deployer-git --save
进行部署
hexo deploy
hexo deploy

使用Next主题让站点更酷炫

下载Next主题

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

从Next的Gihub仓库中获取最新版本。

启用Next主题

需要修改站点的配置文件_config.yml配置项theme,

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

验证是否启用

hexo s --debug

访问 http://localhost:4000,确保站点正常运行。

Next的官网

Next的中文官方网站.可以在上面查找想获取的信息。

您可能想查找下面的文章:

  • 使用Hexo+GitHub搭建个人博客

相关文章

  • 2018-08-23AI教程!教你 3 步做出高格调的悖论空间
  • 2018-08-23用实战案例告诉你,一幅插图是怎么画出来的?
  • 2017-08-06关于HTML面试题全部汇总
  • 2018-08-23小米新品的海报背景,用这个神器可以一键生成!
  • 2018-08-238年资深设计师:间距不会调?掌握这一个点,从此不再迷茫!
  • 2017-08-06面试时可能被问到的一些CSS问题
  • 2018-08-23立即用得上!写给初学者的五分钟设计指南(附大量干货)
  • 2018-08-23解析 iOS 11:苹果还像过去一样在意细节吗?
  • 2018-08-23说点心里话!「QQ飞车×Vans随我造」项目背后的设计故事
  • 2018-08-23用好这5个广告文案妙招,最纠结的用户也会被你打动!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 遵循这7个原则,能让你的网页用户体验更优秀
    • 超实用!网页顶部导航栏设计方法总结
    • 我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!
    • css浮动(float,clear)通俗讲解经验分享
    • 怎样设计网页?怎样制作网页?
    • 实战案例!网易考拉品牌升级全过程实录
    • 人工智能字体来了?!阿里×汉仪的全球首个人工智能中文字库面世!
    • 用这个方法临摹作品,你的UI自学才最有效!
    • 如何用设计思维指导实际工作?这里有份超详细的解答!
    • 人气教程!教你用PS/AE制作超萌的动态表情

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有