竞价托管怎么做,北京seo优化,旅游网站模板设计,合肥网络推广公司乐蜂基于giteehexo搭建个人博客
由于国外的github page访问总是非常慢的#xff0c;本文选择国内开源代码托管平台码云#xff0c;因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客#xff0c;首先感谢木千之博主的详细教程#xff0c;给了清…基于giteehexo搭建个人博客
由于国外的github page访问总是非常慢的本文选择国内开源代码托管平台码云因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客首先感谢木千之博主的详细教程给了清晰的思路写下这篇博客将详细过程记录希望帮助更多的人减少搭建过程中的坑也希望可以为其他选择使用GiteeHexo搭建个人博客的亲们提供帮助。
总体的思路
总体的思路是在本地利用Hexo框架搭建一个静态网站然后将项目推送到码云上通过配置Gitee Page即可根据Gitee Page网址地址进行访问如果显域名不好看可以在阿里云或者腾讯云上购买自定义域名需要本案过程还是挺麻烦的自己买了也没用。Hexo官网地址https://hexo.io/zh-cn/docs/Gitee官网地址(https://gitee.com/)阿里云购买域名。
一、环境配置
由于我们选择在Windows10平台上使用GiteeHexo来搭建个人博客且网站/博客本质上是一个资源目录其中包含了显示的页面文本与调用的样式CSS等文件因此我们需要首先在本地建立一个存储个人网站的目录如命名为MyWeb。接下来我们就需要安装两个重要的环境一个是提供版本克隆与下载追踪的git一个是由文本文件生成HTML文件的Hexo框架注如果有这两个工具可以直接跳过。 node.js : 下载可以从其官方界面开始https://nodejs.org/zh-cn/ Gitee下载则可以从其官方界面开始https://git-scm.com/ 上述安装下载后按照指示安装即可安装成功在MyWeb中单击空白右键应能弹出启动Git Bash Here的选项。
二、Hexo的安装与基本命令的使用
接下来我们可以安装生成网站的关键——Hexo架构了其主要信息和安装命令、主题等都可以从其官网轻松得到https://hexo.io/zh-cn/
为了安装Hexo只需要在MyWeb目录中单击右键启动Git Bash Here然后输入命令
npm install hexo-cli -g网上有很多其他的命令建议一切以官网命令为依据由于时间版本原因很有可能未来的命令发生改变而失效。
然后等待几分钟取决于你的网速完成后需要首先进行初始化在本地生成Hexo相关目录
hexo init然后就可以使用Hexo三连了即我们最常用的三个主要命令依旧在上述Git Bash命令端口中
hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器可以在localhost:4000查看网站修改效果依次运行上述三个命令就可以在浏览器打开localhost:4000端口查看对应网站界面效果一般默认的是一个landscape主题后期当提交新文章或者新的样式修改时往往都是先从本地查看结果无误后再部署到Gitee Page
三、主题下载与安装
Hexo官网上提供了丰富的主题可选你只需要打开对应的界面https://hexo.io/themes/选择喜欢的然后点击名称跳转到GitHub仓库选择下载或者克隆对应的zip文件到本地并且解压到网站目录下的themes目录即可。 下图中则是我网站中的主题文件请注意网站的路径 然后接下来你需要修改两个配置文件 你的网站根目录下的_config.yml文件即网站配置文件 你选择的主题的自带配置文件_config.yml即主题配置文件 网站配置文件会配置你网站的URL地址、博客名称以及与Gitee上传的方式等基本信息而主题配置文件则会定义实际页面显示的美观效果、多媒体声音视频等以及评论等附加功能。 四、网站配置文件修改
关于网站配置文件修改很简单但是并不容易因为一不小心就会出现域名带来的访问错误在开始修改网站配置文件前我建议大家先去Gitee上注册登录新建一个仓库用来保存你未来展示的个人博客页面、样式等资源关于名称很多网上教程都说可以自定义然后在配置文件中正确指定即可然而这里自己遇到了第一个坑 坑一新建仓库与Gitee不同名导致无法正确解析 网站配置文件采用文本样式打开后可以找到下面一段代码
url: http://mr-rangerover.gitee.io/ #填写自己Gitee Page的网站地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:trailing_index: true # Set to false to remove trailing index.html from permalinkstrailing_html: true # Set to false to remove trailing .html from permalinks
上述说明中提到可以自定义名称只需要在root字段修改即可然而这里有两个容易出问题的地方 你的URL并不是你所在仓库的地址而应该是你启动仓库的Gitee Page服务后分配给你的网站静态域名以我个人为例仓库地址为https://gitee.com/mr-rangerover/mr-rangerover.git我新建的网站名称与Gitee账号同名而网站URL应为“服务–Gitee Page”启动/更新后显示的网站地址http://mr-rangerover.gitee.io 你的网站目录当然可以和账户不同名但是那样就需要按照文档说明修改root字段自己当初定义的名称不同结果导致域名莫名无法解析总是无法正确访问网页因此干脆像GitHub Page一样强制要求使用账号同名新建网站仓库这样还获得了以账号名为特征的独有域名一举两得 跳过了上面的坑接下来需要制定网站采用的主题样式这里也需要注意主题文件解压缩后不要重命名直接将主题文件名称复制后设置为网站主题即 #博客样式
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: hexo-theme-pure-master #填写自己的样式文件夹的名字坑二Git部署目录不是仓库地址 网站配置文件修改
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: gitrepository: gitgitee.com:mr-rangerover/mr-rangerover.gitbranch: master注意上面的repository地址并不是仓库的地址而是你下载/克隆项目时弹出的那个地址如果使用git就选择SSH
跳过了上面两个坑后面就比较简单了你需要仔细阅读主题文件下的README.md文件以根据主题特点实现自定制网站。在此之前你还需要在网站的Git Bash中运行一次安装所有主题依赖插件包的命令
npm install
npm install --save hexo-deployer-git #为之后做准备不装会报错ERROR Deployer not found: git完成之后可以执行三行命令将本地静态资源push到码云
hexo clean #清理
hexo g #生成静态资源
hexo d #将本地资源提高到码云坑三、Gitee端的更新 其实这也算一个小坑吧一般而言理解一旦运行了hexo deploy(or d)应该就已经将新的网站文件主要是网站目录下的public目录上传到了Gitee然而事实上上步之后直接访问网站URL会发现页面没有改变原因在于你、没有、更新是的对于免费Gitee用户而言你会需要手动更新一下Gitee Page然后才可以将修改真的“部署”到可访问的网站上。折腾了我好久 只需要再次点击【更新】稍等片刻即可完成部署后点击网站地址可以查看个人博客。如果远程页面和本地页面有出入可以点击刷新 F5或者shiftF5 五、末尾
上述过程记录了一般采用GiteeHexo搭建个人博客的过程除了跳过几个“坑”之外还需要认真阅读主题目录下的README.md文件以进一步修改页面的索引、标签、图片风格等具体样式。
好了到此为止你已经有了一个初步的个人博客剩下的是根据需要添加不同插件或者调整风格了。
祝愿大家都能有一个属于自己的个人博客感兴趣的朋友可以随时联系我也可以访问我的个人网站 http://mr-rangerover.gitee.io
如果存在问题请同学给予指正谢谢。
附属技巧
一 、宠物插件 输入命令利用npm安装相关包
在MyWeb目录中单击右键启动Git Bash Here然后输入命令
npm install hexo-helper-live2d
npm install live2d-widget-model-hijiki在MyWeb目录下配置_config.yml找到deploy添加以下代码
#修改部署方式
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: git#控制宠物样式和状态
live2d:enable: truescriptFrom: localpluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中log: false model:use: live2d-widget-model-hijikidisplay:position: rightwidth: 150height: 300mobile:show: true # 是否在移动设备上显示react:opacity: 0.7二、Markdown中的图片上传到gitee图床 参考链接https://blog.csdn.net/qq_42661919/article/details/122457892?spm1001.2014.3001.5501
