GitHubPagesにツイッターカード付きで公開!!

最近はRubyを最初からやっていて いかに出来てたフリしてたかわかりました...
Paiza的な問題でPaizaでもAランクくらい狙いたいと思います!!





今回したのはGitHubPagesに公開するだけでなくフォントも取得しました!
ちなみに作成したのは簡単な1カラムのAboutMeページ

といっても↓こちらからJapaneseフォントをDLして指定するだけだけですけどね
Googleのフォント
好きな日本語フォントなどをダウンロードしてCSSで指定する↓



あとはHTMLとCSSで装飾をしてGitHubに置くだけ!!(index.htmlが公開されるのでファイル名をindex.htmlにしよう!!)
(JSが使えるので jQueryやVue.js BootStrapも使えますよ)

アップロードしたリポジトリのsettingのタブで
 Source  master  branch  saveとしてURLが発行されたら少ししてアクセスする!
(上の部分の薄緑がURL  その下のSourceのところを変更しよう!!)


それで公開したページ → Yomi


ツイッターカードもつけるひと工夫もしてみた!!
成功!!

ツイッターカードのメタタグ↓ これをheadに追加するとツイッターカード出せるよ!
<!--START Twitter Card -->
      <meta content='summary' name='twitter:card'/>
      <meta content='@アカウントIDを入れる' name='twitter:site'/>
      <meta content='@アカウントIDを入れる' name='twitter:creator'/>
      <meta content='ツイッターカードで移動するURL' property='og:url'/>
      <meta content='ツイッターカードのタイトル' property='og:title'/>
      <meta content='ツイッターカードの説明文' property='og:description'/>
      <meta content='ツイッターカードに使う画像のURL' property='og:image'/>
    <!--END Twitter Card -->

GitHubでhtmlを公開するサービスなのでGitとGitHubのcommitする知識は必要なので
GitHub Desktopなどだけでもできそうなのでまだよくわからない人は使ってみてください!

プロゲートだと簡単にできるみたい!!


コメント

人気の投稿