Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GitHub の README をいい感じにする / Cool Readme

Taiju Aoki
November 08, 2019

GitHub の README をいい感じにする / Cool Readme

LT for M3 TechTalk

Taiju Aoki

November 08, 2019
Tweet

More Decks by Taiju Aoki

Other Decks in Programming

Transcript

  1. GitHub ͷ README Λ͍͍ײ͡ʹ͢Δ @blue_1617

  2. ࢲ͸୭ʁ blue (@blue_1617) https://blue0513.github.io/show_room/ 2 ‣ ΤϜεϦʔגࣜձࣾ ιϑτ΢ΣΞΤϯδχΞ ‣ Emacs,

    Ruby, JavaScript ‣ VisualStudio, C# ‣ ےτϨΛ࠷ۙ͸͡Ίͨ ‣ ମॏ͕4Ωϩۙ͘૿͑ɺ੒ՌΛײ͍ͯ͡Δ ‣ ࠓظΦεεϝΞχϝ ‣ ΞϑϦΧͷαϥϦʔϚϯ
  3. GitHub ͷ README Λ͍͍ײ͡ʹ͢Δ

  4. ࠓճͷΰʔϧʂʂ 4

  5. ࠓճͷΰʔϧʂʂ 5 ͳΜ͔ͭ·ΒΜͳ......

  6. ࠓճͷΰʔϧʂʂ 6

  7. ࠓճͷΰʔϧʂʂ 7 ͔͍͍ͬ͜ʂʂʂ

  8. ࠓճͷΰʔϧʂʂ 8 https://github.com/blue0513/slackdeck-proto Project Name, Release Version, DL, ESLint, Jest

    Λදࣔͨ͠ Badge Λ README ʹ͚ͭΔ
  9. ඞཁͳཁૉͨͪ 9 README ΛؚΜͩΞϓϦέʔγϣϯ

  10. 10 ඞཁͳཁૉͨͪ GitHub

  11. 11 ඞཁͳཁૉͨͪ ESLint

  12. 12 ඞཁͳཁૉͨͪ Jest

  13. 13 ඞཁͳཁૉͨͪ Badge

  14. 14 ඞཁͳཁૉͨͪ Badge Jest ESLint GitHub

  15. 15 ໨࣍ ‣ README ΛؚΜͩΞϓϦ ‣ GitHub Actions ͱ͸ ‣

    ESLint Λ CI Ͱճ͢ ‣ Jest Λ CI Ͱճ͢ ‣ README ʹ Badge Λ௥Ճ͢Δ
  16. README ΛؚΜͩΞϓϦέʔγϣϯ 16 Slack Λ TweetDeck ෩ʹݟΔπʔϧ https://github.com/blue0513/slackdeck-proto

  17. README ΛؚΜͩΞϓϦέʔγϣϯ 17 Slack Λ TweetDeck ෩ʹݟΔπʔϧ https://github.com/blue0513/slackdeck-proto

  18. 18 ໨࣍ ‣ README ΛؚΜͩΞϓϦ ‣ GitHub Actions ͱ͸ ‣

    ESLint Λ CI Ͱճ͢ ‣ Jest Λ CI Ͱճ͢ ‣ README ʹ Badge Λ௥Ճ͢Δ
  19. 19 GitHub Actions https://github.com/features/actions

  20. https://github.com/features/actions GitHub Actions 20 https://github.com/features/actions ৄࡉ͸ެࣜΛݟͯ͘Ε͍͞ʂ ‣ CircleCI ΍ Travis

    Λ࢖Θͣʹ CI/CD Ͱ͖Δػೳ ‣ Linux, Windows, macOS ʹ΋ରԠ ‣ 3rd party ੡ͷ Action Λར༻Մೳ ‣ yml Ͱ Workflow ΛఆٛՄೳ ‣ Public Repo: Free! ‣ Private Repo: ैྔ՝ۚੑ
  21. 21 ໨࣍ ‣ README ΛؚΜͩΞϓϦ ‣ GitHub Actions ͱ͸ ‣

    ESLint Λ CI Ͱճ͢ ‣ Jest Λ CI Ͱճ͢ ‣ README ʹ Badge Λ௥Ճ͢Δ
  22. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 22 $ touch REPOSITORY/.github/workflows/eslint.yml $ emacs

    -nw eslint.yml $ git add --all & git commit -m "add eslint" $ git push yml ΛσΟϨΫτϦʹ௥Ճͯ͠ push ͢Δ
  23. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 23 push ࣌ʹಈ͘ ubuntu Ͱಈ͘ root

    directory ΁ ESLint !
  24. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 24 Actions λϒͰ ESLint ͕࣮ߦ͞ΕΔ

  25. 25 ໨࣍ ‣ README ΛؚΜͩΞϓϦ ‣ GitHub Actions ͱ͸ ‣

    ESLint Λ CI Ͱճ͢ ‣ Jest Λ CI Ͱճ͢ ‣ README ʹ Badge Λ௥Ճ͢Δ
  26. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 26 $ touch REPOSITORY/.github/workflows/jest.yml $ emacs

    -nw jest.yml $ git add --all & git commit -m "add jest" $ git push yml ΛσΟϨΫτϦʹ௥Ճͯ͠ push ͢Δ
  27. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 27 push ࣌ʹಈ͘ ubuntu Ͱ࣮ߦ Node

    ͕ೖΔ Jest !!
  28. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 28 Actions λϒͰ Jest ͕࣮ߦ͞ΕΔ

  29. 29 ໨࣍ ‣ README ΛؚΜͩΞϓϦ ‣ GitHub Actions ͱ͸ ‣

    ESLint Λ CI Ͱճ͢ ‣ Jest Λ CI Ͱճ͢ ‣ README ʹ Badge Λ௥Ճ͢Δ
  30. README ʹ Badge Λ௥Ճͯ͠Έͨ 30 GitHub ͷ README ͰΑ͘ݟΔ͍ͭ͜ΒΛ......

  31. README ʹ Badge Λ௥Ճͯ͠Έͨ 31 GitHub ͷ README ͰΑ͘ݟΔ͍ͭ͜ΒΛ௥Ճ͢Δ

  32. README ʹ Badge Λ௥Ճͯ͠Έͨ 32 https://shields.io/ shileds.io Λ࢖ͬͯ Badge Λ࡞Δ

  33. README ʹ Badge Λ௥Ճͯ͠Έͨ 33 https://shields.io/ shileds.io Λ࢖ͬͯ Badge Λ࡞Δ

  34. README ʹ Badge Λ௥Ճͯ͠Έͨ 34 ྫ͑͹ɺBuild ؔ࿈ͷ Badge ΋ͨ͘͞Μ͋Δ

  35. README ʹ Badge Λ௥Ճͯ͠Έͨ 35 Markdown ʹຒΊࠐΉ৔߹ɺLink Λॻ͚͹Α͍ ![logo](https://img.shields.io/badge/SlackDeck-Proto-blue) Custom

    Badge ![version](https://img.shields.io/github/v/release/blue0513/slackdeck-proto) Release Version /github/v/release/:user/:repo /travis/:user/:repo , etc ...
  36. README ʹ Badge Λ௥Ճͯ͠Έͨ 36 GitHub Actions ͷ৔߹ɺshields.io Λ࢖Θ͍͚ͣΔ ![jest](https://github.com/blue0513/slackdeck-proto/workflows/jest/badge.svg)

    Jest ![eslint](https://github.com/blue0513/slackdeck-proto/workflows/eslint/badge.svg) ESLint https://github.com/{owner}/{repo}/workflows/{workflow_name}/badge.svg)
  37. ͱ͍͏Θ͚Ͱɺ৭ʑ΍͚ͬͨͲ.....

  38. None
  39. None
  40. None
  41. ࠓճͷΰʔϧʂʂ 41 https://github.com/blue0513/slackdeck-proto Project Name, Release Version, DL, ESLint, Jest

    Λදࣔͨ͠ Badge ͕ README ʹ͍ͭͨʂ
  42. ·ͱΊ 42 ‣ GitHub Actions Ͱ CI/CD ΛճͤΔΑ͏ʹͳͬͨ ‣ yml

    ఆٛʹΑͬͯ ESLint, Jest ͳͲ͕࣮ߦ ‣ Public Repository ͸ແྉ ‣ Shields.io Ͱ Badge Λ࡞੒Ͱ͖ΔΑ͏ʹͳͬͨ ‣ Repository ͷ಺༰ΛಡΈऔͬͯࣗಈ࡞੒ ‣ Custom Badge ͰΦϦδφϧײ΋ग़ͤΔ ‣ README ͕ͦΕͬΆ͘ͳͬͨʂ