HTML ? CSS? ??? ? ?? ???? ??? Eleventy ???? ???? ?? NetLify ???? ??????. ? ??? ?? ????? ???? ???? ??? ?? ???? ?? ??? ?? ??? ???? ?????.

??? ??? ? ?? ??? ???? ??????? Github, Jetpack ? ?? ???? ?? ??? ??????. Ryan Filler ? Zach Leatherman? ?? ???? ? ??? ??? ??? ????? ?? ??? ?? ??? ?????. ???? ? ?? ??? ??? ?? ??? ????? ??? ? ? ????.

? ????? ???? HTML ? CSS? ???? ??? ?? ?? ?? ???? ??? ??? ?? Eleventy ???? ?? ? ?? NetLify? ?? ? ? ????.

?? ??? ??? ? ??? ???? ??? ????? ???? ??? ??????!

?? ???? ??????

HTML?? ?????, ??? ?? ??? ?? ???? ?????.

<meta content="?? ?? ??" property="og:title">
<meta content="??? ??, ? ???" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

? ???? Facebook?? ???? ??? ???? ??? ? ? ????.

LinkedIn, Twitter, WhatsApp, Slack, Discord, Imessage…? ?? ? ???? ?? ?? ???? ?????. ? ????? ??? ?? ??? ???? ?? ??? "??"? ??? ?????.

????? ?? ?? ??? ?? ?? (Twitter ??)? ??? ?? ?????. ????? ??? ??? ?? ? ??? ???? ?? ???? ?????.

??? ??? ??? ?????? ?? ??? ???? ?? ??? ??? ??? ?? ???? ??? ?? ??? ?? ?? ?? ?????. ??? ??? ??? ????. ??? ???? ??? ???? ??? ?? ??? ? ????.

?? 0?? ?? 3??

?? ??? ??? ????? ????. ??? ???? ??? ???? ??? ?? ??? ??? ?? ??? ??? ???.

?? 0

?? ???? ??? ??? ??? ??? ????. ??? ?? ??? ???? ?? ???? ?? ? ? ??? ??? ???? ?????.

?? 1

???? ??? ?? ????? ?? ? ?? ??? ??? ????. ? ???? ?? ?? ??? ??? ??? ???? ????? ??? ? ???? ??? ?? ????. ??, ?????? ??? ????, ?? ???? ?? ? ????? ?? ??? ? ? ??? ??? ? ? ????. ???? ???? ??? ????.

?? 2

?? ??? ??? ? ??? ? ???? ?? ?????. ? ????? ?? ? ???? ??? ?? ????. ??? ??? ??? ?? ? ? ???? ?? ? ????? ??? ??????. ??? ??? ? ??? ?? ? ?? ??? ?? ??? ??? ?? ??????? ????.

??? ??? ????? ??? ? ????. ??? ?? ?? ?? ? ??? ?????. ??? ??? ? ? ???, ??? ??? ??? ??? ?? ?? ????.

?? 3

?? ?? : ? ????? ???? ???? ?? ??? ????. ??? CSS- ????? ????. ?? ?? ??? ???? ????. ??? ????? ?????. ??? ??? ??? ??? ??? ??? ??? ????, ?? ??? ???? ??? ????. ??? ?? ?? ??? ????.

? ???? ?? ??? ?? ??? ???? : ???. ??? ? ???? ?? ? ???? ??? ?? ??????. ??? ??? ?? ??? ???? ???????. ??? ??? ?????? ? ????? ???? ???? ?????.

??? ?? ???? ?? ? ???? ??? ???

??? ?? ??? ?? ??? ??? ?? (? ?? ??)? ???? ?? ??? ???? ?? ????. ? ???? ??? ???? ?? ? ? ??? 2 ?? ????? ????.

1. ?? ?? ? ??
2. ?? ? URL? ?? ???? ??? ??????

?? ??? ?? ??? ???????. ??? ???? ??? ? ??? ?? ?? ????. ??? ??? ??? ??? ??? ????. ? ???? ?? ???? ???????. ??? ??, ?? ? ?? ?? ???? ? ? ??? ????? ????. ??? ?? ???? ?? ???? ???? ?? ????.

???? ??? ?? ?? ??? ?????. ??? ? ?? ??? ????? ?? ?? ??? ??? ?? ???? ????. (???? 2020 ? ?? ?? ??? ????). ??? ? ?????, ??? Eleventsy ? ???? ??? ????. Eleventy? ??? ?? ? ??? ??????. ???? ???? ?? ?? ??? ????? ??????. ???, ? ?? ??-?? ???? ?????.

Electronic-Base-Blog Github ???? ???? ????? ??????.

???? ??? ??? ??? ??? ???????. ??? ??? ?????? ????? ??? ? ????. ???? ????.

???? ???? ??? ???? ???? ???? ???? ?????.

 git ?? [??? URL]
CD my-demo-blog ### ?? ??? NPM ?? ? ????
NPM ??? ??

?? ? ???? http : // localhost : 8080?? ?? ????.

?? ?????. Netlify?? ??? ?? ??? (??? ??!) ????. (?, ???? ?? : ??? ?? ??? ???? Netlify ??? ?????.)

??? ????? ?? NetLify? ???? ??? ???????. ?? ???, ? ??? ??? :

NetLify? ??? ???? ?????? ??????.

Netlify ???? ?????.

? 1 ? ? ???? ???????.

??? ??? ???? ?? ??????

??? ?? ???? ??? ???? ???????. ? ???? ???? ?? ?? ?? ?? ???? ??? HTML ? CSS? ?????. HTML? ???? ???? ?? ???? ????? ?? ? ??? ??, ?? ?????? ???? ??? ????.

??? ?? ???? ?? ???? ?? RESOC ??? ??? ?? ??? ??????. ??? ???? ?? ?????? ????? ??? ? ????.

 npx itdk init re resoc-templates/default -m ?? ??

? ??? RESOC-Templates/Default ????? ? ??? ???? ????. ??? ???? ???? ????.

? ???? ??? ??? ? ??? "??"?? ??? ?? 2? ?? ? ? ????. ?? 3?? ?? ?? CSS- ?? ???? ???? ? ??? ?? ??? ????.

• ??? ????? ???? ??? ???? ??? ????.
• ???? ??? ??? ??? ? ?? ???? ??? ?? ???? ?? ? ?? ?? ????.
• ??? ??? ??? ??? ??.

????? ?? ?? ??? ??? "?? ??"???? ???? ?? ? ??? ????? ?? ? ? ????. ??? ????? -m title-description ??? ? ??? ??????. ??? resoc-templates/default/resoc.manifest.json ???? ? ?? ?? ??? ?? ? ? ????. ?????, ? ?? ?? ??? ??? ? ????.

 {
  "??": {
    "???": "./content.html.mustache",
    "???": "./styles.css.mustache"
  },
  "?? ??": [
    {
      "??": "??",
      "??": "???",
      "emarvalue": "??? ? ??? ??? ????"
    }
  ]]
}

????? ??? ?? ??? ?????.

?? ??? ??? ??? ? ?????. resoc-templates/default/content.html.mustache ?? ???? ?? ? ? ????.

<div>
  <main><h1>{{ ?? }}</h1></main>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="RESOC? ???? ??? ?? ?? ???? ????">
  <h2>?? ???</h2>
</div>

??? ?? ??? HTML???. ?, {{ title }} ????. ??? ??? ? RESOC? ?? ?? ?? ???? ???? ? ???? ??? ?????. ?? ??? ?? ???? ???? ?? ??? ??? ?? ????.

????? ? ? ??? profil-pic.jpg ???????. ??? ??? ??? resoc-templates/default/profil-pic.jpg ? ??????.

?? resoc-templates/default/styles.css.mustache ? CSS? ???????. ? ???? ??? ???? ?????? ??? ???? ??? ?? ??? ??????.

 @import url ( 'https://fonts.googleapis.com/css2?family=anton&family=caleway&display=swap');

/ * ... CSS ?? ... */

???? ??? VW ? VH ??? ?? ???? ?? ? ??? ??? ????? ???? ? ?????. ??? Facebook? ??, ? 1200 × 630? ????. ??? ??? ??? ??? ????. ???? ?? ??? (600 × 315)? ??? ? ? ??? 1200 × 630? ????? ?? ? ???????.

???? 1200 × 630?? Facebook ????? ????? ??? ?? ?????. ????? ??? ??? ???? ?? ?? ?? ??? ???? ???????.

???? ???? ??? ??? ??????.

(?? ??? ?? ??? ??? ?? ??? ??? ?? ? ?????. ??? ???? ????? ?? ?? ? ?? ??? ???? ? ???? ????? ????.)

? ??? RESOC? ???? ??? ?? ?? ???? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!