Мне нужен беспалтный Хостинг CSS, JS, ...mp3, пока берем Dropbox

Предполагаю, что эти облачные сервисы Гугла занк того, что пора прикупить место у какого-нибудь хостера. На этот пост я угрохал два дня. Наконец, дошли руки до стилей этих блогов. Оказалосб, что Гугл с августа всем рекомендует Google cloud... Сначала по-быстрому залил css-файлы для этого блога на DropBox и порадовался, что все быстро решилось... Но с испугу решил поискать более надежный хостинг для моих аудио-файлов. И пришел к (неверному) выводу - использовать Dropbox... Здесь временное решение.

Три файла CSS для Blogger. Я везде "отсек все лишнее", а свои хаки добавил в третий файл
Мои хаки blogger
Google Cloud Storage Pricing

Начнем с конца¶

Вот решение для css и (надеюсь) js

In [ ]:

https://www.dropbox.com/home/Public/Hosting/blogger

In [ ]:

<link href="https://dl.dropboxusercontent.com/u/5038506/Hosting/blogger/notebook1.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/5038506/Hosting/blogger/notebook2.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/5038506/Hosting/blogger/notebook3.css" rel="stylesheet"/>

Решение для аудиофайлов я нашел эдесь How to Host & Stream Music on DropBox¶

To get the direct link to the file, replace www.dropbox.com with dl.dropboxusercontent.com

Вот пример того, что получается...

In [ ]:

<audio controls="">
<source src="https://dl.dropboxusercontent.com
             /s/n0qtxksglpcpck0/2017_01_24_16_14_43.mp3" type="audio/mp3">
</audio></p>
<p>
</p>
<p>
This browser does not support HTML5 audio</p>
</audio>

А с Гуглом все не здорово, хостинг (css) прикрыли Google Drive CSS Returns 404 Error¶

Google Drive Web Hosting is now deprecated. That goes for both CSS and JS, and no matter what link format you use (host, id, view, etc.).

Any CSS or JS you have on Google Drive, linked to a website, will no longer work (even if it was all setup - and working - before this deprecation came about). For example (I tested this myself repeatedly), CSS won't load, and upon inspecting your site, you'll see that the Drive link your stuff is supposed to be on, returns a 404.

In Google's own words:

Beginning August 31st, 2015, web hosting in Google Drive for users and developers will be deprecated. You can continue to use this feature for a period of one year until August 31st, 2016, when we will discontinue serving content via googledrive.com/host/[doc id].

After careful consideration, we have decided to discontinue this feature and focus on our core user experience.

For those who have used Drive to host websites, Google Domains can refer you to third parties for website hosting functionality.

For those who use this feature to serve non-user content to web and mobile applications, Google Cloud Platform offers a better-performing solution.

In [ ]:

<link href="http://docs.google.com/uc?export=open&id=0B33ENKH9MfPXYVFBdnRZU2pTdXc" rel="stylesheet">
<link href="http://docs.google.com/uc?export=open&id=0B33ENKH9MfPXOXpWYTJNUlVUY1k" rel="stylesheet">
<link href="http://docs.google.com/uc?export=open&id=0B33ENKH9MfPXTzMyWjVHSE9YRjQ" rel="stylesheet">

Эти три строчки кода надо будет вставить во всех моих "ноутбучных" блогах на место старых...

А вот так было (состарившиеся строчки)¶

In [ ]:

<link href="https://googledrive.com/host/0B33ENKH9MfPXYVFBdnRZU2pTdXc" rel="stylesheet">
<link href="https://googledrive.com/host/0B33ENKH9MfPXOXpWYTJNUlVUY1k" rel="stylesheet">
<link href="https://googledrive.com/host/0B33ENKH9MfPXTzMyWjVHSE9YRjQ" rel="stylesheet">

И уже довольно давно эти адреса не работают, ниже сообщения из консоли. Браузер честно три раза пытается загрузить файлы, но коварный Гугль начеку:

In [ ]:

Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXOXpWYTJNUlVUY1k Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXTzMyWjVHSE9YRjQ Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXYVFBdnRZU2pTdXc Failed to load resource: the server responded with a status of 404 ()

https://googledrive.com/host/0B33ENKH9MfPXOXpWYTJNUlVUY1k Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXTzMyWjVHSE9YRjQ Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXYVFBdnRZU2pTdXc Failed to load resource: the server responded with a status of 404 ()

https://googledrive.com/host/0B33ENKH9MfPXOXpWYTJNUlVUY1k Failed to load resource: the server responded with a status of 404 ()
https://googledrive.com/host/0B33ENKH9MfPXTzMyWjVHSE9YRjQ Failed to load resource: the server responded with a status of 404 ()

Пробуем такой же вариант строки адреса, как с mp3 файлом¶

In [ ]:

# %load http://docs.google.com/uc?export=open&id=0B33ENKH9MfPXTzMyWjVHSE9YRjQ
/* Overrides of notebook CSS for static HTML export */
body {
  overflow: visible;
  padding: 8px;
}

/** google navbar**/
body .navbar {
height: 1px;
padding: 0;
margin: 0;
}

@media print {
  .cell {
    display: block;
    page-break-inside: avoid;
  } 
  .output_wrapper { 
    display: block;
    page-break-inside: avoid; 
  }
  .output { 
    display: block;
    page-break-inside: avoid; 
  }
}
/*08-12-2014 */
/*before update*/
.box-flex1 {
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -ms-box-orient: vertical;
    -ms-box-align: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    flex: 1 1 0%;
}
/*date of post*/
.date-header span {font: bold 11px "Trebuchet MS",Trebuchet,Verdana,sans-serif;}

/*left indent for text_cell ...and headers*/
div.text_cell .prompt {
min-width: 0ex; 
padding: .4em; 
}

/*reduce vertical margins between text blocks*/
.text_cell_render {padding: .0em .5em .0em .4em;}


#CustomSearch1 {
position: absolute;
top: -50px;
right: 0px;
width: 453px;
z-index: 9;
margin-top: 14px;
}
/*custom search button width*/
.gsc-search-button {
margin-left: 2px;
width: 60px;
}
/*custom search input*/
input.gsc-input {
padding: 1px 6px;
border: 1px solid #DDD;
width: 99%;
background-color: #eeeeee;
}
/* Top Menu*/
.tabs-outer {
margin-bottom: 24px;
}
/*reduce post margins*/
.post {
    margin: 0px 0px 5px;
}
/*reduse margin before bottom widgets*/
.main-inner { margin: 0px; padding:0px;}
/*titles for comments block*/
h3.post-title, .comments h4 {
font: normal normal 18px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
margin: .75em 0 0;
}

/*titles for widgets*/
.widget h2 {
font: normal normal 18px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
}

Работает, однако

Пробуем из Dropbox¶

In [ ]:

# %load https://dl.dropboxusercontent.com/u/5038506/Hosting/blogger/notebook3.css
/* Overrides of notebook CSS for static HTML export */
body {
  overflow: visible;
  padding: 8px;
}

/** google navbar**/
body .navbar {
height: 1px;
padding: 0;
margin: 0;
}

@media print {
  .cell {
    display: block;
    page-break-inside: avoid;
  } 
  .output_wrapper { 
    display: block;
    page-break-inside: avoid; 
  }
  .output { 
    display: block;
    page-break-inside: avoid; 
  }
}
/*08-12-2014 */
/*before update*/
.box-flex1 {
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -ms-box-orient: vertical;
    -ms-box-align: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    flex: 1 1 0%;
}
/*date of post*/
.date-header span {font: bold 11px "Trebuchet MS",Trebuchet,Verdana,sans-serif;}

/*left indent for text_cell ...and headers*/
div.text_cell .prompt {
min-width: 0ex; 
padding: .4em; 
}

/*reduce vertical margins between text blocks*/
.text_cell_render {padding: .0em .5em .0em .4em;}


#CustomSearch1 {
position: absolute;
top: -50px;
right: 0px;
width: 453px;
z-index: 9;
margin-top: 14px;
}
/*custom search button width*/
.gsc-search-button {
margin-left: 2px;
width: 60px;
}
/*custom search input*/
input.gsc-input {
padding: 1px 6px;
border: 1px solid #DDD;
width: 99%;
background-color: #eeeeee;
}
/* Top Menu*/
.tabs-outer {
margin-bottom: 24px;
}
/*reduce post margins*/
.post {
    margin: 0px 0px 5px;
}
/*reduse margin before bottom widgets*/
.main-inner { margin: 0px; padding:0px;}
/*titles for comments block*/
h3.post-title, .comments h4 {
font: normal normal 18px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
margin: .75em 0 0;
}

/*titles for widgets*/
.widget h2 {
font: normal normal 18px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
}

Тоже работает...

Посты чуть ниже также могут вас заинтересовать