Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >github+hexo+个人域名建立个人网站

github+hexo+个人域名建立个人网站

作者头像
Y大宽
发布于 2019-05-10 07:02:48
发布于 2019-05-10 07:02:48
6.1K00
代码可运行
举报
文章被收录于专栏:Y大宽Y大宽
运行总次数:0
代码可运行

写在前面: 之前一直用hugo结合github使用,这次尝试hexo,发现非常喜欢,可塑性很强。 主要记录一些坑 这个博文主要是大体记录流程,至于中间参考过的3篇建站文章会列出来。总之根据这篇博文你可以完全搭建属于自己的个性网站。

为体验更好效果请移步github+hexo+个人域名建立个人网站

1 github的工作

1 注册github,不再描述

2 建立repo

记得repo名字要和github id一样。也就是如果你的id是hello,那么要申请一个hello.github.io的repo。

2 本地电脑的工作

请参考https://www.jianshu.com/p/189fd945f38f 大体分为以下几步

1下载安装Git

2下载安装node.js

3安装hexo并进行初始化

选择某个盘,创建hexo文件夹,别的名字也行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g hexo
hexo init

4修改config.yml文件,关键是theme

稍许,hexo文件夹里会出现很多内容。用notepad++打开_config.yml文件,修改 title(博客名字) subtite(副标题) author(作者名字) 关键是theme ,系统默认是landscape,也可以查看更多主题。个人比较喜欢next主题,另外, black-blue, BlueLake, pure主题也不错。每个主题都会告诉你下载方式,直接参照进行就行,手动下载或git clone下载。 其余部分可以暂时不动。(现在也可以更改,看2.7.1)下载后的主题会存放在hexo下的themes文件夹里。

这个地方是hugo是不一样的处理方式,hugo要吧主题的example文件下的内容进行copy替换。而hexo是同时处理根目录和主题目录。

5生成网站并在线查看

现在就可以在本地电脑查看雏形了.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hexo g
hexo s

若要查看更多hexo命令,请移步查看更多hexo命令 hexo s后,会提示端口,复制就可以本地访问,都是localhost:4000

6 写第一篇文章

刚才说了hexo是根目录和主题下目录多要修改一些内容。所以,往下会加上根目录(代表\hexo),主题目录代表(\hexo\themes\next)。

写文章是在根目录:\hexo\source_posts。如果你在简书有文章,可以直接复制,可以完美识别。记得如果用toc功能,需要#后又空格,否则不被识别。 写完后,再次hexo s既可以看到更新。

7 部署到github

1 更改根目录_config.yml,最好需要有以下内容

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
deploy:
  type: git
  repository: https://github.com/你的名字/你的名字.github.io.git
  branch: master 

2 安装hexo-deployer-git自动部署发布工具

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install hexo-deployer-git  --save

3 发布到github

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hexo clean && hexo g && hexo d

如果初次使用需要输入用户名密码之类,牢记,这样你的github repo就会有你刚才push的内容

4 在线访问

https://你的名字.github.io/ 我的是https://hyinli.github.io/可以查看

3主题配置

这部分花费时间比较多,所以单列出来。 现在雏形已经具备,接下来要进行主题配置,添加一些比较有用的插件等。hexo有很多插件 各种各样的配置,一定有你喜欢的。 这部分主要参考这两篇文章,非常详尽,如果还有你想不到的内容,那就单项google搜索。 Windows下使用hexo搭建博客 Hexo+NexT搭建博客拥抱舒爽 主要包括有 语言,类别,标签,菜单,头像,统计在线时间,访问量,等。这些不再赘述。

1 开启文章目录

请参考Hexo博客NexT主题开启文章目录和调整样式 nextT本身有目录的,我们需要开启它

1 修改custom.styl

themes/next/source/css/_custom notpad++打开,添加以下内容 打开及调整目录字体

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#文章目录默认展开
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }
#目录字体大小调整
.post-toc ol {  
  font-size : 13px;     
}

修改主题配置文件themes/next/_config.yml

目录换行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
toc:
  enable: true  
  wrap: true

文章目录无法锚定的问题

假如出现,文章目录生成,但是就不能链接到正确的地方。如果自己的操作没错误,那就执行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hexo clean命令
#然后
hexo d -g

4 被百度和google搜索引擎能搜索到,参考上述两篇文章

5 绑定个人域名

1 购买个人域名

我是阿里云买的

2 域名解析

设置如下

域名解析

3 Hexo设置

\hexo\source下创建CNAME文件(没有后缀,且全部大写),notepad++打开,首行写上你购买的域名 我的就是 http://www.ucco.net 网上有人建议必要加www 但是这样设置后 看起来非常不好看,我又加上了

4 github设置

再回到github,打开你的名字.github.io中的setteings,修正以下内容 custom domain中,

github设置

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序----导航栏选项卡(MUI顶部选项卡)
效果图 WXML <import src="../../template/list.wxml"/> <view class="tui-tabbar-content"> <view class="
Rattenking
2021/02/01
1.8K0
微信小程序----导航栏选项卡(MUI顶部选项卡)
微信小程序密码输入框
<view class='box'> <view class='row' bindtap='inputFocus'> <view class="{{index == activ
明知山
2020/09/03
2K0
微信小程序加减号弹出框详解
<view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">view> <view class='rob-box' wx:if="{{showModalStatus}}"> <view class="shade-shop-detail"> <view class="detail-right flexb"> <view class='detail-title-de'>购买数
疯狂的小程序
2018/01/25
1.8K0
微信小程序----map路线规划
bug: 页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中。 感谢: 感谢Lrj_estranged指出问题!
Rattenking
2021/02/01
1.4K0
微信小程序----map路线规划
微信小程序----折叠面板(MUI折叠面板)
总结: 1 每一个折叠面板需要一个布尔值变量来控制; 2 在控制详情隐藏和显示时,要将右侧的箭头对应切换; 3 showFrom函数对每一个布尔值变量的修改三目表达式的优化。
Rattenking
2021/02/01
1.9K0
微信小程序----折叠面板(MUI折叠面板)
微信小程序----button组件
展示效果图 button组件的常用属性 size:default、mini----default为块级按钮、mini为小按钮 type:primary、default、warn----primary提
Rattenking
2021/02/01
1.1K0
微信小程序----button组件
两万字:讲述微信小程序之组件
6.cover-image目前原生组件均已支持同层渲染,建议使用 image 替代
淼学派对
2022/11/20
4.1K0
两万字:讲述微信小程序之组件
小程序扫码成功后带着参数跳转到指定页面
要扫的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。
王小婷
2018/12/26
5K0
基于腾讯云开发微信小程序(新闻发布及共享平台)下
微信小程序云开发是腾讯云和微信团队联合开发的,集成于微信小程序控制台的原生Serverless 云服务,解决了Serverless架构对端的“最后一公里”问题,通过集成端SDK,配合云开发后台的API网关,为开发者提供了一站式后端云服务。云开发支持多种客户端,帮助开发者统一构建和管理资源,免去了开发中服务器搭建、极大简化了URL配置、鉴权管理等流程,让微信小程序开发者专注于业务逻辑的实现,而无须理解后端逻辑及服务器运维知识,门槛更低,效率更高。只需要一名开发人员就可以完成所有的工作。
淼学派对
2022/11/20
3.4K0
基于腾讯云开发微信小程序(新闻发布及共享平台)下
小程序搜索弹出搜索内容功能(模糊查询)
功能:在搜索界面,搜索输入的字符,如果有匹配,就会显示出来。 wxml <view class="page"> <view class="page__bd"> <view class="w
王小婷
2019/02/21
6.7K0
小程序搜索弹出搜索内容功能(模糊查询)
微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端。效果图:
用户4432598
2019/01/06
10.3K1
【愚公系列】2022年03月 微信小程序-视图容器
覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
愚公搬代码
2022/12/01
6710
【愚公系列】2022年03月 微信小程序-视图容器
小程序百问百答
this对象在程序调用时,如点击事件中会随时改变,而var that=this之后,that没重新赋值之前仍然是指向当时的this,这样就不会出现找不到原来的对象而导致报错
用户10175992
2022/11/15
7550
小程序百问百答
微信小程序----全国机场索引列表(MUI索引列表)
效果展示图 实现的原理 '当前选择机场’和右侧的导航栏采用的是固定定位; 左侧的展示窗口的滚动采用的是scroll-view组件; 选择中的字母提示是自己WXSS样式制作。 WXML <view cl
Rattenking
2021/02/01
1.1K0
微信小程序----全国机场索引列表(MUI索引列表)
微信小程序之支付密码输入demo
  在小程序中实现支付密码的输入,要解决几个问题:   1、小程序要想唤起键盘,必须要借助input控件。通过input控件和其属性focus来唤起和隐藏输入键盘。
tandaxia
2018/09/27
4.7K1
微信小程序之支付密码输入demo
小程序点击按钮弹出可填写框
这是项目里面一个简单的效果,小程序点击按钮弹出可填写框,摘下代码,方便之后遇到的时候可以直接拿来使用。 效果如下:
王小婷
2018/12/28
3.6K0
【黄啊码】微信小程序向下弹出菜单,包含筛选功能
要解决的问题 标签栏三栏样式,标签栏固定不动; 点击标签栏弹出菜单,并且出现透明遮罩; 遮罩优先级在弹出框之下; 弹出框内标签的设置; 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index; 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0; height: 0; color: transparent;
黄啊码
2022/06/15
5540
【黄啊码】微信小程序向下弹出菜单,包含筛选功能
手把手教你微信小程序如何设置密码输入框
源代码 .josn 弹出框用了vant小程序的ui,需要下载。也可以不用,抽取关键代码即可。 vant-weapp:https://vant-contrib.gitee.io/vant-weapp/#/quickstart
江一铭
2022/06/17
2.8K0
手把手教你微信小程序如何设置密码输入框
手把手教你做个煎饼小程序,摊子开起来
周饼伦在街头摊煎饼,摊后人群熙熙攘攘。他忙得不可开交,既要记住面前小哥要加的培根,又要记住身后奶奶要加的生菜,这时又来了个小妹妹,点的煎饼既要培根又要腊肠。他把鸡蛋打进煎饼后,竟突然忘了前面光头大叔要加的料,是火腿还是鸡柳?一时记不清,好像是火腿,对。然而当把煎饼交给大叔,大叔却怒了,说要的是鸡柳。😡
腾讯云开发TCB
2024/09/12
1720
手把手教你做个煎饼小程序,摊子开起来
微信小程序----scroll-view组件(MUI索引列表)滚动动画
DEMO下载 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位; 利用scroll-view的scroll-with-animation属性实现滚动动画过度。
Rattenking
2021/02/01
1K0
微信小程序----scroll-view组件(MUI索引列表)滚动动画
推荐阅读
相关推荐
微信小程序----导航栏选项卡(MUI顶部选项卡)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验