首页 > 编程知识 正文

python搭建个人博客,vercel搭建个人博客

时间:2023-05-03 22:31:38 阅读:275317 作者:1097

前言:之前学习云服务器时搭建过个人网站,现在我的云服务器停止维护了,现就博客模块(基于Gitee+Hexo搭建个人博客),之前有很多在github上用Hexo模板或express模板搭建个人博客的教程,但访问速度原因,现就码云进行实操并记录搭建过程。

一、准备

node.js下载,官网:https://nodejs.org/zh-cn/
Git下载,官网:https://git-scm.com/
根据提示安装即可。(ps.我的安装记录及cnpm镜像源更换参考)

查看node.js版本

git版本

二、hexo博客模板

hexo中文官网:https://hexo.io/zh-cn/

新建一个MyWeb目录,这个目录很重要,将来会存储你所有博客的markdown文件以及生成的html文件,慎重选择。

选中MyWeb目录,右键点击Git Bsah Here

安装hexo

npm install hexo-cli -g

如果网速慢,可以采取cnpm安装

初始化hexo模板

hexo init

目录分析:

安装完成后的目录:
其中,目录MyWebsource_posts下存放都为makedown(md)格式文件

运行hexo
常用hexo三句话:

hexo clean # 清空已有hexo网站文件hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件hexo server(or s) # 启动本地服务器,可以在localhost:4000查看网站修改效果

在浏览器输入http://localhost:4000就能查看演示样式helloworld页面:

一般默认的是一个landscape主题,后期当提交新文章或者新的样式修改时,往往都是先从本地查看结果无误后再部署到Gitee Page。

主题下载

官网主题:https://hexo.io/themes/
推荐两款:

Sakura 非常炫,缺点加载慢 https://github.com/honjun/hexo-theme-sakura Next 功能集成多,简洁https://github.com/theme-next/hexo-theme-next

五款好用的hexo主题推荐

进入github点击下载zip:https://github.com/honjun/hexo-theme-sakura
解压文件夹,将hexo-theme-sakura-masterthemes中的主题样式复制MyWebthemes目录下:

主题配置在MyWeb主目录找到:_config.yml,记事本打开并修改默认theme: landscape为

theme: sakura # 这里需要注意:后面要有一个空格,名称要和theme下的主题目录名称相同。

重新测试运行

hexo cleanhexo ghexo s

细节修改参考:sakura使用教程

三、码云配置

申请码云账户,新建仓库
注意:仓库名,公开访问权限,语言为JavaScript
3.16日修改:
第二步:这里仓库名cungudafa必须与你注册github或gitee的注册名cungudafa相同,不然css路径会读错

获得仓库地址:

修改配置在MyWeb主目录找到:_config.yml,记事本打开并修改默认
-》
其中repo后面为你的仓库地址,每个:后都有一个空格。

deploy: type: git repo: 你的项目地址 branch: master

部署博客

npm install hexo-deployer-git --savehexo g --d #一键部署

此时会弹出一个对话框,提示输入码云的账号密码。部署成功后,登陆码云。此时本地文件夹中出现有一个public文件夹,代表部署成功。

目前,查看码云中文件为:

本地多个public文件夹:

开启Page功能

之前我的配置已为https,已勾选。修改位置如下图:

部署成功后如图:网址为登录网址:

访问博客 https://cungudafa.gitee.io

四、博客使用

在博客目录的source文件中的_post文件夹中添加你要写的博客文件,文件命名为file_name.md
file_name.md的文件开头如下:

---title: file_nametag: 标签名categories: 分类comment: 是否允许评论(true or false)description: 描述---文档正文编写,请参照markdown语法。

示例:

发布文章并推送到gitee上

推送成功:

目前的内容是将md格式文件自动生成对应目录,转换成html格式显示。

再点击技术文档时,没有加载index.html

手动更新Gitee端
其实运行了hexo deploy(or d)应该就已经将新的网站文件(主要是网站目录下的public目录)上传到了Gitee,然而事实上上步之后直接访问网站URL会发现页面没有改变,原因在于:你、没有、更新!
https://gitee.com/cungudafa/cungudafa/pages 服务中选择更新:

是的,对于免费Gitee用户而言,你会需要手动更新一下Gitee Page,然后才可以将修改真的“部署”到可访问的网站上。

再访问:

五、总结

个人博客修改
博客目录在source文件中的_post下,文件命名为file_name.md
file_name.md的文件开头如下:

---title: file_nametag: 标签名categories: 分类 #分类在sakura显示才能查看comment: 是否允许评论(true or false)description: 描述---文档正文编写,请参照markdown语法。

发布:

hexo clean # 清空已有hexo网站文件hexo g --d# 依据网页文本与新的CSS样式生成新网站文件,并一键发布hexo s # 启动本地服务器,可以在localhost:4000查看网站修改效果

免费使用gitee还需手动更新page。

hexo博客模板样式很多,需要一次详细的修改,能为博文锦上添花!

附:将csdn博客导出发布在个人博客中:

点击导出,格式为makedown格式,复制到目录下,并加上分类:

---title: file_nametag: 经验分享123categories: 技术123comment: truedescription: 描述123photos: https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2275415319,1766856612&fm=26&gp=0.jpg---

接下来重复发布操作即可。

在线演示页面:test

这里存在一个问题,csdn上的图片设置图片后,会在hexo中显示不能显示,需要将图片大小调整删去:

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。