用码云搭建简单的个人个性博客

简介: 很简单,大概一个小时就可以做好!先说下原理码云pages是一个静态网站托管地方,再加上码云本来就是个代码托管的地方,集成pages后,可以很方便的部署你的代码本文原理:利用 马克飞象生成博客的md文件,利用He...

很简单,大概一个小时就可以做好!

先说下原理

码云pages是一个静态网站托管地方,再加上码云本来就是个代码托管的地方,集成pages后,可以很方便的部署你的代码

本文原理:利用 马克飞象生成博客的md文件,利用Hexo把代码生成静态页面,再一键部署到码云上,开启pages后就实现了博客的雏形,当然,想要做的更好还可以继续优化

其实最早出现是github+hexo的整合,但是本人第一个接触的代码托管平台就是码云,而且还是国产的,相比于github访问速度要提高不少,所以有了pages功能后,就直接在这上面做了,其实部署在github上也是可以的!

Hexo是一个快速, 简洁且高效的博客框架. 让上百个页面在几秒内瞬间完成渲染. 具有强大的插件整合系统.

安装Hexo需要安装node.js和git

1. 安装node.js

2. 安装git

cmd输入以下指令 查看是否安装成功,git的环境环境变量跟JDK一样配置,node版本一定要大于6.9

 

3. 安装Hexo

利用 npm 命令即可安装。在桌面任意位置点击鼠标右键,选择Git Base/Git Base Here

输入命令:

npm install -g hexo

注意:-g是指全局安装hexo。

在任意位置创建一个hexo文件夹。进去文件夹  鼠标右键  选择Git Base/Git Base Here

输入以下指令Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

hexo init

刷新下文件夹 ,会有以下的目录

 

 

红框内的没有也无所谓,后续会生成的

继续执行以下指令 npm install(安装依赖包)

hexo generate(构建,这时候会有红框内的文件夹了)

hexo server(启动服务,关闭服务是ctrl+c)

启动后   输入路径localhost:4000到游览器即可看到效果了,类似这样的网站

 

这个主题只是官方默认的主题,当然可以自己修改的,但是官方也提供一些网友自己制作的主题,可以直接套用

网址:https://hexo.io/themes/

 

黄框内可以点击预览,选择一个自己喜欢的后,点击左下方红框后进入到github中

 

选择红框内点击下载,下载下来是一个zip包,把里面的东西解压至hexo/themes中

 

复制这个文件夹名字。再返回上一级,打开_config.yml,

将里面theme 对应的值改为复制的名字

 

冒号后面要有个空格,而且是英文下的空格,不然会有错误

修改后保存,再在hexo内打开  git bash,执行以下指令

hexo generate

hexo server

现在刷新下4000的页面,就会有新的主题出现了

Hexo中_config.yml 文件的其他配置,官方的文档: https://hexo.io/zh-cn/docs/configuration.html

4.编写博客文章。

咱直接用最容易上手的,马克飞象 链接:https://maxiang.io/,下载客户端

在编辑器里面写好文章后,另存为MarkDown文件,

在这里我说一下,不用工具也可以的,你用txt也可以的,当然要加上下面的开头以便让hexo识别,再存为.md文件就可以

另外开发人员可以在页面写代码的。比如在正文中插入 <img src="***"> 这些都是可以被识别的,总归不管什么编辑器,只要生成的是md文件就可以了

博客内部开头要加

title: httpclent调用webservice   #文章标题

date: #文章日期格式:2018-05-30 15:20:36

tags: #文章标签

categories: #文章分类

 

---

冒号后面要有一个空格,categories后空一行,要有3个 - ,用来和文章内容区分

 

编辑好后点击人头的标志。

 

选择markdown保存,保存下来是一个zip压缩包。内部是md文件,

将写好的.md文件放入hexo文件夹下的source 目录下的 _posts 文件夹中,可以看到里面有个hello-world.md 文件,这是默认的文章。

现在  在git bash中关掉服务,再hexo server就可以看到刚才的文章了

5.部署在码云上

注册什么的就不必多说了。很简单都是中文,新建一个项目

 

复制https的地址

在git bash内执行以下指令

npm install hexo-deployer-git --save

这一步是使用hexo-deployer-git插件将代码推送到码云(现在只是安装)

再次打开hexo根目录的_config.yml 文件,修改deploy 的值

修改前:

 

修改后

 

冒号后面必须要有个空格

Repository就是刚才复制的地址

OK后 在git bash中执行 hexo deploy 将代码部署至码云

随后会出现2个对话框,username 输入码云帐号,password输入码云密码

OK后点击码云中刚才新建的项目

 

在黑框内可以看到刚才提交的代码,时间基本都是刚刚

然后点击服务,红框,点击pages

 

分支不用改,默认就行,点击启动服务

 

点击地址就是外网可以访问的博客了

OK,基本的框架好了。在编写博客的时候,只要重复第四步就可以了

然后推送到码云上,再重新部署下,它会自动归档

hexo命令:

hexo clean   ##清理

hexo g          ##构建、编译

hexo s          ##启动服务

hexo d          ##上传至服务器

5.域名

Cname据说不得行,所以我直接用了转发

点击链接查看 https://blog.csdn.net/q2158798/article/details/79801226

放上我刚做的     iyohei.gitee.io

一些小问题:

1. 出现错误的时候,看下到第几步,把这一步删了重新装,检查下命令代码有没有问题

2. Node.Js版本一定要大于6.9否则构建hexo时会出现以下错误,hexo默认支持的版本是6.9以上

 

3. 主题有些也有过时的,有时候下载下来的主题不会生效,网站是一大串代码(需要去看hexo主题官网预览页面的博客,肯定会有相关的配置介绍,这些可以说是DIY的了),当然你也可以再换一个主题

4. 关于博客内图片问题,建议使用外链,本地图片部署到码云上不会显示的,外链推荐使用  图床http://www.tietuku.com/,注册个帐号可以免费,不限流量上传图片(我用了CSDN的图片地址,在手机上图片不会显示)

5. 关于图片显示问题,用马克飞象插入的图片外链,有时候在某些主题下会多显示一些字母,这个时候在编辑器里吧图片删了

插入  <img src="***">    这行代码即可,把内部的***改为外链地址

6. 关于主题优化问题,一切东西都可以自定义,修改成自己的名字啊,图标啊,什么的都是可以的,还可以集成站长的一些工具,如访问统计,天气之类的,还有绑定域名啊。感兴趣的可以先百度,有时间我会整理一下再发出来!

另外教程不易多看,每个人的方法都有不一样的地方,建议一篇看到底

有问题可以联系我哦!!

目录
相关文章
|
3月前
|
定位技术
技术好文共享:(官网)虚幻3
技术好文共享:(官网)虚幻3
30 1
|
4月前
|
Java
POETIZE个人博客系统源码 | 最美博客
这是一个 SpringBoot + Vue2 + Vue3 的产物,支持移动端自适应,配有完备的前台和后台管理功能。 网站分两个模块: 博客系统:具有文章,表白墙,图片墙,收藏夹,乐曲,视频播放,留言,友链,时间线,后台管理等功能。 聊天室系统:具有朋友圈(时间线),好友,群等功能。
99 5
POETIZE个人博客系统源码 | 最美博客
|
4月前
|
存储 运维 安全
年终总结:官网搭建知多少
官网搭建的核心工作可以分为以下5个部分,找到每一步的最佳解决方案,专属企业官网就近在眼前啦!
104 1
|
弹性计算 关系型数据库 MySQL
「寻找博客建站大师」详细活动流程
阿里云开发者社区联合弹性计算团队和数据库团队举办「寻找博客建站大师」,领取云服务器ECS和云数据库RDS MySQL Serverless两款云产品免费试用资源,搭建属于自己独一无二的博客吧!晒出你的专属博客参与评选,就有机会获得Airpods Pro、戴尔机械键盘 、数据库双肩包、罗马仕充电宝等精美礼品!
|
缓存 JavaScript 前端开发
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
|
JavaScript Java 应用服务中间件
从 0 开始搭建一个技术博客,私藏干货~
技术博客的选型有很多种,如:博客园、CSDN、开源中国、简书、知乎等……都可以用来写文章,形成自己的技术博客。 上面的博客都是第三方的,有没有方式搭建自己的服务器、自己的域名的博客呢?栈长知道的成熟方案有:WordPress, Hexo 等,栈长的博客就是用 Hexo 搭建的。
968 0
从 0 开始搭建一个技术博客,私藏干货~
|
JavaScript Java 应用服务中间件
不花钱零门槛、10分钟搭建自己的线上博客平台
博客主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。
194 0
不花钱零门槛、10分钟搭建自己的线上博客平台
开发者云《玩转云上博客搭建》热烈来袭。体验场景完成自测,即可领取阿里云HOL定制T恤!
每个站在山巅的技术人,都有一个承载成长与梦想的博客。经典云计算ECS or 黑科技Serverless 极速建站,你Pick哪一只? 完成场景实验并通过测验,即可领取阿里云HOL定制T恤。
开发者云《玩转云上博客搭建》热烈来袭。体验场景完成自测,即可领取阿里云HOL定制T恤!
|
新零售 搜索推荐 算法
案例酷 | 百货商场过时了?看新光天地打造未来购物体验
“如果没有电商,绝大多数百货商场和购物中心都不会现在就遇到转型危机。”新光天地新零售负责人李黎在接受采访时笑言。的确,2010年以来,随着电商平台的迅速发展,传统百货业在巨大冲击之下进入寒冬期。
1127 0
案例酷 | 百货商场过时了?看新光天地打造未来购物体验