开发小白也毫无压力的hexo静态博客建站全攻略

news/2024/5/21 0:35:49/文章来源:https://enjoy233.blog.csdn.net/article/details/88142615

文章目录

    • 基本原理
    • 方法1 - 本机Windows下建站 (力荐)
      • 下载安装`node.js`
      • 用管理员权限打开命令行,安装`hexo-cli`和`hexo`
      • 初始化`hexo`
      • 使用`hexo generate`生成静态资源
      • 在本地运行`hexo`,看一切是否正常
      • 在`Coding.net`创建与用户名相同的项目,并启用代码的`pages`功能
      • 启用通过`git`将`hexo`部署到远程的功能
      • 使用`_config.yml`来配置`hexo`
      • 使用`hexo clean && hexo g && hexo d`发布`hexo`博客
      • 域名绑定
      • 主题使用
    • 方法2 - Cloud Studio下建站 (力荐)
      • 在`Coding.net`创建与用户名相同的项目,并启用`pages`功能
      • 使用现有项目创建工作区
      • 使用命令行配置环境
      • `_config.yml`文件的配置、域名绑定、主题使用等等

本文介绍对开发小白也毫无压力的hexo静态博客建站全攻略, github.iocoding.me的静态博客类似,3年前本人基于本机 Windowsgithub.io上创建了静态 Github Pages - yanglr,本文以在 Coding pages上建站为例。

基本原理

配置区: 用于hexo博客的配置,成功部署后原hexo init产生的目录下会生成一个public的文件夹。

发布区:
事实上,这一部分就是由配置区生成的public文件夹中的内容。

发布区的代码必须是公开的,配置区的代码看需要了,如果git部署时使用的是repo: https://用户名:密码@仓库地址这种方式,如果也push到公开代码的仓库就会泄漏个人密码了,所以建议配置在自己的电脑上进行,或使用ssh key的形式代替明文密码。

方法1 - 本机Windows下建站 (力荐)

下载安装node.js

到官网下载最新版的nodejsLTS版安装即可。

用管理员权限打开命令行,安装hexo-clihexo

$ npm install hexo-cli -g
$ npm install hexo --save

如果安装速度很慢,可以考虑先换淘宝镜像源:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

再继续进行安装~

初始化hexo

比如,打算在D:\盘进行配置,若将配置的文件夹取名为blog,操作如下:

$ cd D:\
$ hexo init blog

文件夹名字任意起,根据个人需要了。

使用hexo generate生成静态资源

存放hexo配置的文件夹blog创建好之后,就可以使用hexo generate来生成静态资源了,该命令也可简写为"hexo g"。

在本地运行hexo,看一切是否正常

此时可使用hexo server(简写为hexo s)来开启本地web服务器查看页面效果,默认情况下在浏览器中打开http://localhost:4000即可看到如下界面:
img

Coding.net创建与用户名相同的项目,并启用代码的pages功能

打开网址https://dev.tencent.com/user/projects/create,即可创建项目。
由于项目名字与用户名legege007一致,所以我的coding静态pages的访问地址即为 legege007.coding.me, 你用同样的方法,地址会变成你的用户名.coding.me。而如果你的项目名是blog, 而用户名不是blog,则此时coding静态pages的访问地址即为你的用户名.coding.me/blog, 这样会有一个隐含的问题在,就是如果你要绑定个人域名,会导致静态资源js、css等加载失败,即博客会出现有文字但呈现页面混乱的情形。

启用通过githexo部署到远程的功能

完成此项工作,需要先安装hexo-deployer-git, 相应需要在命令行中执行:

$ npm install hexo-deployer-git --save

安装途中可能会遇到问题:
"npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself. ",
此时的处理办法是:

$ npm install lodash
$ npm install eslint@^4.12.0

使用_config.yml来配置hexo

一开始,我们只需要修改deloy相关才参数即可.

deploy:type: git  #上传类型 选择gitrepo: https://legege007:xxx@git.dev.tencent.com/legege007/legege007.git  # 执行 git remote -v 可以获得branch: master  # 部署到 Master分支#message: update blog # 每次提交的信息 不填默认为当前时间

只需要将repo改为你的仓库的ssh版地址即可。
同时,你还需要在coding项目中加入自己的公钥,居然方法为:
打开命令行终端输入ssh-keygen -t rsa -C <your_email@example.com>(你的邮箱),连续点击 Enter 键即可。

Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] 
// 此处推荐使用默认地址,也可在密钥后面加后缀,即输入"id_rsa_coding"

找到刚才生成的id_rsa_coding.pub,将其中的内容贴到Coding的公钥信息中:
img
此时,git推送应该具有权限了~

使用hexo clean && hexo g && hexo d发布hexo博客

不出意外的话,等命令完全跑完就能从静态地址你的用户名.coding.me看到你的博客内容了。

域名绑定

先去域名管理系统中加一条CNAME记录, 比如我的域名是https://enjoy233.cn,此处想绑定到https://www.enjoy233.cn,则添加方法如下:
record1

然后在coding pages的页面中设置如下:
img2
过几分钟后,就能通过域名www.enjoy233.cn来访问我的博客了。

主题使用

个人觉得 hexo主题 Material X还挺不错的~
就安装试了一下,首先命令行要做的事情是:

$ cd blog
$ git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-xnpm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

然后将_config.yml中的theme配置为:
theme: material-x (默认是landscape)
此时,再使用hexo clean && hexo g && hexo d发布博客,再刷新博客就能看到使用主题后的效果了。

方法2 - Cloud Studio下建站 (力荐)

此处介绍在Cloud Studio中使用两个branch建站的方法,master分支作为发布区,config分支作为配置区。

Coding.net创建与用户名相同的项目,并启用pages功能

打开网址https://dev.tencent.com/user/projects/create,开始创建项目。

我的用户名是legege007,于是就建了个legege007的项目.
img

使用现有项目创建工作区

打开网址 https://studio.dev.tencent.com/dashboard/workspace/create, 即可进入Cloud Studio。
我选择使用了node.js的环境来进行配置,同时选中项目legege007,然后创建即可。
img

使用命令行配置环境

Cloud studio中默认是Linux系统,我习惯于用root的权限来操作,免得后面还需要用chmod之类的命令来改权限,一进IDE界面,使用命令sudo su切换即可。

$ sudo su

然后新建config分支后,配置主要在该分支上进行。

$ git checkout -b config

其他相关命令使用过程具体如下:

➜  workspace git:(master) sudo su
root@coding:/home/coding/workspace# git checkout -b configroot@coding:/home/coding/workspace# git checkout -b config
Switched to a new branch 'config'root@coding:/home/coding/workspace# hexo init blogroot@coding:/home/coding/workspace# cd blog/
root@coding:/home/coding/workspace/blog# hexo groot@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo droot@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --saveroot@coding:/home/coding/workspace/blog# npm audit fixroot@coding:/home/coding/workspace/blog# npm install lodashroot@coding:/home/coding/workspace/blog# npm install eslint@^4.12.0root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --saveroot@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo droot@coding:/home/coding/workspace/blog# ssh-keygen -t rsa -C "legege007@yeah.net"
root@coding:/home/coding/workspace# cd ~/.ssh
root@coding:~/.ssh# ls
id_rsa  id_rsa.pub  known_hosts
root@coding:~/.ssh# vim id_rsa.pubroot@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d

上述命令和在windows下操作时基本一致遇到问题,解决问题即可~

_config.yml文件的配置、域名绑定、主题使用等等

_config.yml文件的配置、域名绑定、主题使用等等,基本上与在Windows下安装完全一样,参考Windows下同样的操作即可,就不再赘述了。

另外,值得一提的是:
Cloud Studio还有几个优势,即:

  • 可以迅速切换环境,比如hexonode.js.net CoreUbuntuJava等互转,速度超快的。
  • 可以一键部署,除了coding.me的域名可用以外,一键部署后,还提供一个coding.io的域名可以访问~

img6

本文首发于本人的博客园博客:
https://www.cnblogs.com/enjoy233/p/10468996.html.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_782899.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Varnish代替Squid做网站缓存加速器的详细解决方案

使用Varnish代替Squid做网站缓存加速器的详细解决方案 [文章作者&#xff1a;张宴 本文版本&#xff1a;v1.2 最后修改&#xff1a;2008.01.02 转载请注明出处&#xff1a;http://blog.s135.com]我曾经写过一篇文章──《初步试用Squid的替代产品──Varnish Cache网站加速器》…

windows下安装使用svn管理网站开发项目

svn是一个版本控制系统&#xff0c;其前身是cvs。所谓版本控制系统&#xff0c;就是能在一个数据库中记录开发阶段的每个开发版本&#xff0c;和所有文件的修改历史。这个功能是很有用的&#xff0c;它使得追溯代码的修改和软件的演进过程成为可能。 本文仅涉及在windows本机使…

电脑打开网页很慢_影响网站打开速度哪些,影响网站打开速度的因素有哪些?...

原标题&#xff1a;影响网站打开速度哪些&#xff0c;影响网站打开速度的因素有哪些&#xff1f;其实会影响到网站打开速度的因素有很多&#xff0c;并且每一项对网站打开速度的影响都不是很大&#xff0c;但是久而久之影响网站打开速度的因素越来越多&#xff0c;也就导致网站…

[CTO札记]SNS蜂巢模型,及其在内容型网站的应用型态

一、原始模型SNS有个典型的Honeycomb模型&#xff0c;将7个要素列举出来&#xff08;如下图&#xff09;。二、模型要素变更窃以为‘状态’要素并不合理&#xff0c;因为太窄。如果将‘状态’替换成更泛化的‘内容/信息’也许更好。三、应用于内容型网站也许大家认为SNS的内容/…

资讯交流网站设计与实现_企业公司官网如何设计建设

随着互联网的发展&#xff0c;企业对自己的官网也越来越重视&#xff0c;企业官网也逐渐成了企业中必不可少的重要一部分&#xff0c;而企业官网又可以细分为几种类型&#xff0c;不同的企业可以根据自身的业务需求开发不同类型的企业官网&#xff0c;为了让企业能够更好地定位…

35网站首页全方位优化过程分享

文章出处&#xff1a;http://ui.35.com/2009/08/10/35oz/一直以来我们都在寻找提高网站访问性能的方法&#xff0c;日益庞大的内容和页面效果使我们的网站越来越臃肿&#xff0c;速度越来越慢。有没有什么办法能有效的解决这个问题呢&#xff1f;答案是肯定的。下面是对我们公司…

一个利用ISA2006发布自己做的一个网站报错记录

1.客户在IIS6里面新建网站&#xff0c;在内部浏览到网页正常。2.透过ISA发布后&#xff0c;发现无法打开&#xff0c;报错。3.解决方法&#xff1a;发布规则中&#xff0c;侦听器--身份验证---高级----允许通过HTTP进行客户端身份验证。

大仕途网站 资源不能下载

大仕途网站&#xff0c;大多数资源&#xff08;电子书&#xff09;都不能下载&#xff0c;我不说他是骗子&#xff0c;我只是实事求是地说出我的经历。希望给看到的人一点建议&#xff0c;是不是骗子自己判断吧&#xff01; 大仕途网址&#xff1a; http://www.dashitu.com/ 我…

ZXTM专题二:使用ZXTM用自建ssl证书实现网站的https协议访问

可能一些网站的二级域名涉及交易,用户信息等敏感重要信息,所以建议使用https协议替代传统的httpd,我这里使用了负载均衡ZXTM来做这件事情. 1 创建公钥,私钥,证书 习惯借用linux下的openssl工具,zxtm也可以创建相应东东: [rootdongwm conf]# openssl genrsa -des3 1024 > ser…

网站后台管理无法登陆------inetinfo.exe进程占用CPU达100%

收到到来自山东的消息说系统出现问题,问题的表现是后台无法登陆. 步骤如下: 1 开始进行网络测试,通过Ping服务器IP时进行测试发现网络没有问题,而当ping后台管理网址的时候ping不通,数据包全部丢失.2 随后远程控制服务器,通过IIS进行浏览也不可以登陆后台.不过后来仔细观察发现…

GBin1教程:使用jQuery Mobile快速开发一个手机阅读网站

日期&#xff1a;2011/10/25 来源&#xff1a;GBin1.com jQuery mobile已经慢慢进入了web开发人员的视野&#xff0c;随着jQuery mobile框架的发展&#xff0c;使用jQuery mobile开发手机端应用将会成为一个趋势&#xff0c;今天GBin1带给大家一个入门级的jQuery mobile开…

美国法官责成Google取消对数百家网站的索引

为什么80%的码农都做不了架构师&#xff1f;>>> “经过一系列的单方面听证&#xff0c;奢侈品制造商香奈儿&#xff08;Chanel&#xff0c;服装、香水品牌&#xff09; 赢胜了最近几起对上百家进行假冒奢侈品交易的网站的诉讼。 一位内华达&#xff08;Nevada&#…

Apache网站首页全面改版

Apache 软件基金会&#xff08;也就是Apache Software Foundation&#xff0c;简称为ASF&#xff09;&#xff0c;是专门为支持开源软件项目而办的一个非盈利性组织。在它所支持的Apache项目与子项目中&#xff0c;所发行的软件产品都 遵循Apache许可证&#xff08;Apache Lice…

0) keras 实训开篇:资源,视频,网站参考;keras:deeplizard;

什么是keras 友好的 py 深度学习 lib &#xff0c;令你快速实现 一个 神经网络 keras 的 作者 是&#xff1a; (Franois Chollet)[https://twitter.com/fchollet] keras 是三个 机器学习 lib 的 上层 wrapper 如何安装 keras 就这样&#xff1a; pip install tensorflowdee…

11个超有用的iPhone开发网站、论坛、博客

2019独角兽企业重金招聘Python工程师标准>>> 整理了一下手中的iPhone开发网站、论坛和博客&#xff0c;精选了这10个常去的网站。其中有2篇教学文章&#xff0c;由于非常经典&#xff0c;于是单列出来&#xff0c;与其网站并列。建议新入行的朋友在看教学文章的同时…

深入浅出网站分析(二)—— Google Analytics报告结构与指标体系

正确的使用Google Analytics报告是开始网站分析的第一步。这将令你事半功倍。我们经常会在面对大量的数据时迷失&#xff0c;不知道从哪里开始&#xff0c;甚至产生挫败感。 在Google Analytics中为我们提供了4大类&#xff0c;近百个标准报告。再加上通过细分和自定义衍生出的…

校园“一卡通”网站攻击测试用例

全国各大高校普遍采用哈尔滨新中新电子股份有限公司的“校园一卡通”运行日常校园内的各种应用&#xff0c;此系统提供了一个网站后台可以提供刷卡信息查询&#xff0c;丢卡挂失等操作。但该网站后台实现非常不严谨&#xff0c;存在很多的漏洞&#xff0c;根据乌云漏洞平台的数…

网站备份解决方案实战操作讲解(学生分享)

说明&#xff1a;建议博友先观看&#xff1a;人人都是讲师的教学培训体系介绍http://oldboy.blog.51cto.com/2561410/1111405人人都是讲师-学生分享-网站架构备份解决方案实现讲解&#xff08;陶同学分享讲解&#xff09; 1&#xff09;实战考试题描述 2&#xff09;实战考试逻…

优化网站设计(十九):减少DOM元素的数量

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过&#xff0c;我在不同的场合也分享过这样的话题。 作为通用的原则&#xff0c;雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices f…

7月第2周游戏运营类网站/频道:91.com首次第一

IDC评述网(idcps.com)07月22日报道&#xff1a;根据国际统计机构Alexa公布的最新数据显示&#xff0c;7月第2周&#xff08;2013-07-08至2013-07-14&#xff09;游戏运营类网站/频道周均用户覆盖数排行榜首是91.com&#xff0c;其用户覆盖数为1300&#xff0c;其次是用户覆盖数…