将hexo 生成的静态网站部署到GitHub上,无法显示CSS样式?

html-css019

将hexo 生成的静态网站部署到GitHub上,无法显示CSS样式?,第1张

GitHub默认目录路径为 //域名/项目名称/,也就是你所创建的,都是在 项目名称/ 之后。我也是测试了几次才发现的。

拿你自己的项目举例:

其实你自己已经写出来了,你没有注意到;

a:默认域名为:http://localhost:4000/

b:默认页面为index.html

c:默认样式微css/style.css

那么你的本地默认页面是 a+b,即默认样式为a+c

即:http://localhost:4000/css/style.css

如果按照你自己代码的逻辑,就是 a+“/”+c?

即 http://localhost:4000//css/style.css,

变成了// ,所以路径错误。

    node  -v

    显示版本号

    npm  -v

    显示版本号

    git --version

    显示版本号

    去guthub官网注册账号和密码,步骤不过多说明

    是否切换镜像,由你自己决定,这里不做过多切换步骤说明

    输入命令:

    npm install hexo-cli -g

    完成之后可以输入命令

    hexo -v

    显示:版本号

    电脑上创建自己的文件夹,我创建的是blog,之后cd blog,

    如果这些前面的命令都不成功,那么需要系统用户,mac的命令是

    前面加 sudo hexo -v 以此类推

    进入blog后输入

    hexo init blog

    hexo n ”我的第一篇博客“

    hexo clean 

    hexo g

    hexo s    进行本地预览

本地预览效果生效后,安装输入:

npm install hexo-deployer-git

安装完成后,这里我没有切换淘宝的镜像,所以,很多时候都会连接很久,就断开,重新连接。

输入

vi  _config.yml

之后再github进行创建仓库,之后进行kongtiao.github.io.git(我的账号)这样格式创建,xxx.git.io.git格式

在_config.yml里面内容的

deploy:

type : git

repo: git@github.com:Xue1008/kongtiao.github.io.git 

branch: main

注意点:1.这里branch 以前是master 但是后面2019年后github更新,变为了main ,

               2.repo:这里的冒号 要有一个空格之后再输入内容,没有空格,后面hexo上传时候会报错

               3.repo :你之后的也不是加入https://这样,hexo更新之后,如果输入的是htpps的,那么你上传时候会报错。说无法上传。所以必须是在github里面点击ssh,之后点击复制。

在显示内容URL:

这一步是最重要的,不然等会部署到github后就会显示不出css、jquery样式

url: http://example.com

root:kongtiao.github.io.git 

注意:都是有空格后在输入内容

之后点击esc

 输入:

 :wq 

保存退出

再次进行输入 hexo     clean 

hexo g

hexo d

HTML中加载外联CSS文件:<link rel="stylesheet" type="text/css" href=""/>,先看看有没有写错

也有可能是你的路径不对,可以这样写:(大多数情况是位置不对)

相对路径:"../文件夹/文件名.css"(相对于文件的位置)

绝对路径:"F:/文件夹/文件名.css"