如何在github上实现预览

作者: 前端知识  发布:2019-12-19

其一难点在互联网上有很多答案,可是的确能消除的孤单无几!接下去自身就来尝试一下网络上疯传的二种方法。思忖好了吗?笔者要开车了!!!

Hexo是后生可畏种高效的、轻松的、强盛的、静态的博客框架,开拓情况基于Node . js,支持MarkDown,扶助Github陈设。理解越来越多hexo请到官方网址地址:Hexo官方网址 。

PS:以下实验上传到github的demo接纳导入本地css,js和互联网上css,js的法子举办测量检验

  • 友谊提醒:很多大神都在用哦!

       demo目录布局

        ----preview.html

  • node.js,下载安装地址到:nodejs官方网站。
  • git,mac下安装Xcode即可。
  • github账号,用于hexo服务管理铺排。

        ----preview.css

        ----preview.js

  • Hexo 安装,全局安装,加-g参数npm install -g hexo

  • 查看hexo版本hexo version

  • 行使hexo创立项目hexo init nodejs-hexo

    图片 1创建hexo项目.png

  • 启动Hexo服务器cd nodejs-hexohexo server

    图片 2Paste_Image.png

  • 浏览器张开地址

    图片 3暗许的网页分界面.png

        ----jquery-1.11.1.min.js

目录和文书

图片 4目录和文件.png

  • .idea 没啥用
  • node_modules 也没啥用
  • scaffolds 模板工具
  • source 贮存博客正文内容
    • source/_drafts 草稿箱
    • source/_posts 文件箱
  • themes 存放身躯的目录
    • themes/landscape 暗许的肌肤
  • _config.yml 全局的配备文件
  • db.json 静态常量

历次写文章是在_posts目录里操作,_config.yml文件和theme目录是率先次配置好就足以了。这里先首要介绍这七个公文的含义:

  • _posts目录:Hexo是静态博客框架,未有数据库。全体的篇章都已经文件格局开展仓储,就存在_posts目录下。Hexo集成了MarkDown,全数在写博客能够动用Markdown语法格式写博客。文件格式以.md格局存在,比如:hello-world.md。

  • _themes目录:存放四肢,里面饱含一套Javascript CSS样式和依据EJS的模板设置。举例:themes目录下的landscape,那个是暗许的皮层。

  • _config.yml是全局配置文件# Hexo Configuration## Docs: Source:

     # Site 站点信息:定义标题,作者,语言 title: 这里是你博客的标题 subtitle: 不经一番彻寒骨,怎得梅花扑鼻香! description: blog.fens.me author: 笔名 language: zh_CN timezone: # URL Url访问路径 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory 文件目录:正文的存储目录 source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing 写博客配置:文章标题,文章类型,外部链接 new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag 目录和标签:默认分类,分类图,标签图 default_category: uncategorized category_map: tag_map: # Date / Time format 时间和日期格式: ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination 分页设置:每页显示数量 ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions 插件和皮肤:换皮肤,安装插件 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment 部署配置:github发布,type类型为git ## Docs: https://hexo.io/docs/deployment.html deploy: type:
    

PPS:即使你感到下边的水流账又长又臭,那么,请直接拉到尾巴部分,就能够看出预览的实在兑现方式了。

创建新小说

接下去本身来起始创办博客的首先篇文章,能够透过hexo命令创造,也得以在_posts文件目录下开创。

  • 由此命令行制造hexo new 新的一天

    图片 5新的一天截图.png

  • 在_posts目录下

    图片 6Paste_Image.png

此地大家得以用Markdown语法写小说,

 --- title: 新的一天 date: 2016-06-28 15:20:20 tags: - 第一天 - 日记 --- 这是**新的一天**,我用hexo创建了第一篇文章。 通过下面的命令,就可以创建新文章 ```{bash} laoniede-MacBook-Pro:my_hexo xuxianmei$ hexo new 新的一天 INFO Created: ~/my_hexo/source/_posts/新的一天.md laoniede-MacBook-Pro:my_hexo xuxianmei$ ``` 感觉非常好。

在命令行,运转hexo服务器,

 laoniede-MacBook-Pro:my_hexo xuxianmei$ hexo server INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl C to stop.

在浏览器展开,

图片 7新的改过.png

  • 静态化管理 (将文件转变到html,javascript,css)hexo generate

    图片 8静态化处理.png

  • 发布到github在github中创建my_hexo项目,项目地址: 。配置全局文件_config.yml,找到deploy部分,修改,deploy:repo: git@github.com:nfl404/my_hexo.gittype: git然后,通过命令计划,npm install hexo-deployer-git --save

    图片 9保存hexo-deployer-git.png

    hexo deploy
    

图片 10结构hexo.png静态网址就被铺排到了github上,图片 11Paste_Image.png点击项指标Settings,找到Github Pages,张开网页

  • 安装域名大家能够看出国访问谈通过配备github上的站点,和大家在该地浏览的体制不一致样,原因是因站点访问的css和js的加载路线不对,大家绑定好域名后就可以健康显示了。域名注册能够在万网或新网注册,或许别的。域名注册成功后,大家早先分析域名,并且配备DNS。那么些地点会有豆蔻梢头部分坑,下说下本身挂号的域名是在万网注册的,剖析是在DNSPod分析的,为何不在万网深入分析,那正是因为万网深入深入分析遇到了太多坑。增加域名,注册登陆DNSPod,选择域名剖判->增多域名图片 12DNSPod域名增加.png登陆万网访谈域名调整平台,改进DNS如下f1g1ns1.dnspod.netf1g1ns2.dnspod.net图片 13万网改正DNS.png在DNSPod加多记录,设置主机记录,填写记录值(主机ip地址,怎么样获得ip地址,注意:如ip地址设有防火墙,请尝试任哪个地点方),主机记录能够增多@和www三种就可以。加多好后,点击发轫解析。图片 14Paste_Image.png最后,在github中创建多个CNAME的文本,文件中写出你要绑定的域名如niefuling.com图片 15CNANME增多域名.png查看项目Settings查看GitHub Pages,观察站点地址改换(注意:若无成形,原因是改革了DNS,DNS生效要求在48钟头内成功),准确呈现如下,图片 16站点地址变化.png通过浏览器访谈 ,既可以够观察你和睦的博客了。图片 17NiePlus的博客.png

结束。

如有何难点,能够在自己的博客留言,点击这里。

你们的支撑也是笔者发展的重力,特别感激扶持!

连带资料

  • hexo —— 不难、火速、强大的Node.js静态博客框架
  • Hexo在github上塑造无偿的Web应用
  • HEXO Github,搭建归属本人的博客
  • Hexo博客
  • hexo安装
  • Hexo官网
  • 升迁hexo碰到“Deployer not found”难点及缓和

黄金年代、方法风流倜傥利用GitHub & BitBucket HTML Preview网址

啊,也正是那几个网站

图片 18图片 19

自家生龙活虎开端感到那样简单就解决了,然后作者兴致勃勃地把笔者上流传github上边的preview.html地址复制到这些网址上面

图片 20图片 21

回车之后,心绪就像早上愉快出门上班被滴到鸟屎日常!

图片 22图片 23

bootstrap样式表好像加载进来了,bootstrap的js和地方的preview.js不见踪影,本地的preview.css更是丈二和尚摸不这头脑一头雾水,明明加载极度只是div确实显得成紫水晶色的。

接下来就找啊找啊,开掘当我点击进七个css之后,有那些事物(Raw)

图片 24图片 25

点击该开关,开采竟然便是大家网址加载财富的时候css等静态能源从服务器再次回到的格式

图片 26图片 27

擦掉头顶上的鸟粪,对生存重新点燃了希望。替换掉html里面本地财富preview.css、jquery-1.11.1.min.js和preview.js的地点,改成独家在Raw里面包车型地铁地点

<link rel="stylesheet" type="text/css" href="./preview.css">
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./preview.js"></script>

改为

<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Nangxif/preview/master/preview.css">
<script type="text/javascript" src="https://raw.githubusercontent.com/Nangxif/preview/master/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/Nangxif/preview/master/preview.js"></script>

小编在地头尝试了一下

图片 28图片 29

然后就发轫慌了,都还未在线上测验呢,就曾经不行了……

硬着头皮照旧把项目推送到github然后再用GitHub & BitBucket HTML Preview尝试一下。

本文由金沙澳门官网发布于前端知识,转载请注明出处:如何在github上实现预览

关键词: 金沙澳门官网