Jekyll + Github = 무료 호스팅: 튜토리얼

6499 단어
호스팅 비용 없이 이러한 기술을 사용하여 나만의 블로그/포트폴리오를 만드세요!

요구 사항:


  • 터미널
  • Ruby 2.1.0 이상이 설치되어 있는지 확인하십시오.

  •         $ ruby -v
            ruby 2.x.x
    


  • 번들러 설치:

  •      $ gem install bundler
    


  • Jekyll 사이트에 대한 로컬 저장소를 만듭니다. (이 작업이 완료되면 1단계로 이동)

  •  * Install git, see [set up Git](https://help.github.com/articles/set-up-git/)
      * Open terminal
      * Initialize a new Git repo for your jekyll site:
    
    
            $ git init <GitHubUsername>.github.io
            Initialized empty Git repository in /Users/horseforce/andrehatlo.github.io/.git/
            # creates a new file directory on your local computer, Initialized as a Git repo
    


  • 그런 다음 디렉터리를 생성된 새 저장소로 변경합니다.

  •         $ cd <GitHubUsername>.github.io
    


    1단계: 번들러를 사용하여 Jekyll 설치하기


  • 새로 만든 저장소에 Gemfile이 있는지 확인합니다.

  •      $ ls
            Gemfile
    



    * If you have a Gemfile, skip to step 4.
    
  • 필요한 경우 즐겨 사용하는 텍스트 편집기를 엽니다. Atom . 그런 다음 이 줄을 새 파일에 추가하고 저장합니다.

  •         source 'http://rubygems.org'
            gem 'github-pages', group: :jekyll_plugins
    


  • 파일을 로컬 Jekyll 저장소의 루트 디렉토리에 Gemfile 로 저장합니다. 이제 5단계로 건너뛰어 Jekyll을 설치하세요.
  • 이미 Gemfile이 있는 경우에만. 좋아하는 편집기(my is Atom)를 열고 다음 줄을 Gemfile에 추가합니다.

  •         source 'https://rubygems.org'
            gem 'github-pages', group: :jekyll_plugins
    


  • 다음을 실행하여 GitHub Pages gem에서 Jekyll 및 기타 종속성을 설치합니다.

  •         $ bundle install
            Fetching gem metadata from https://rubygems.org/......
            Fetching version metadata from https://rubygems.org/...
            Fetching dependency metadata from https://rubygems.org/..
            Resolving dependencies...
    


    2단계: 로컬에서 Jekyll 사이트 실행



    로컬 리포지토리에서 기본 Jekyll 템플릿 사이트에 대한 사이트 파일을 생성할 수 있습니다.
  • 컴퓨터에 Jekyll 사이트 로컬이 아직 없는 경우 새 디렉토리에 Jekyll 템플릿 사이트를 만듭니다.

  •         $ bundle exec jekyll _3.3.0_ new <new-jekyll-site-repo-name>
            New jekyll site installed in /Users/horseforce/<new-jekyll-site-repo-name>.
    


  • 새 사이트 디렉토리로 이동하고 다음 줄을 제거하여 Gemfile을 편집합니다.

  •     $ 'jekyll', "3.3.0"
    


  • 동일한 Gemfile에서 다음 줄의 시작 부분에 있는 #를 삭제합니다.

  •         $ gem "github-pages", group: :jekyll_plugins
    


  • 디렉터리를 Git 저장소로 초기화합니다.

  •         $ git init
    
    


  • GitHub의 원격 저장소를 사이트의 로컬 저장소에 연결합니다.

  •         $ git remote add origin http://github.com/<username/organization-name/your-remote-repo-name>
    
    


  • Jekyll 사이트를 편집하려면 텍스트 편집기에서 jekyll 로컬 저장소를 여십시오. 원하는 만큼 변경하고 저장합니다.
  • 사이트 구축을 위해 Jekyll 명령을 실행하여 로컬에서 변경 사항 미리 보기:
  • 사이트 루트 디렉토리로 이동합니다.

  •         $ cd <GithubUsername>.github.io
    



  • 다음 명령을 실행합니다.

    $ bundle exec jekyll serve
    Configuration file: /Users/horseforce/andrehatlo.github.io/_config.yml
                Source: /Users/horseforce/andrehatlo.github.io
           Destination: /Users/horseforce/andrehatlo.github.io/_site
     Incremental build: disabled. Enable with --incremental
          Generating...
                        done in 0.309 seconds.
     Auto-regeneration: enabled for '/Users/horseforce/my-site'
    Configuration file: /Users/horceforce/andrehatlo.github.io/_config.yml
        Server address: http://127.0.0.1:4000/
      Server running... press ctrl-c to stop.
    

  • 브라우저에서 http://localhost:4000
  • 에서 로컬 Jekyll 사이트를 미리 봅니다.
  • 변경 사항을 추가하거나 준비하십시오.

  •         $ git add .
    


  • 커밋

  •         $ git commit -m "some stuff changed"
    


  • 변경 사항을 GitHub의 원격 저장소에 푸시합니다.

  •       $ git push -u origin master
    


    3단계: github에서 호스트하도록 만들기



    저장소로 이동합니다.



    다음 형식으로 이름을 지정해야 합니다.

        <github-username>.github.io
    


    리포지토리가 다른 이름인 경우 다음 단계에서 변경할 수 있습니다.

    저장소 설정을 입력하십시오.



    가장 먼저 보이는 것은 Repository name 입니다. 구문과 일치하도록 수정하세요.

        <github-username>.github.io
    


    그런 다음 GitHub Pages가 보일 때까지 repo 설정에서 더 아래로 스크롤합니다.

    @ GitHub 페이지



    바라건대 이제 다음과 같이 말해야 합니다.

    ✔️ Your site is published at: http://www.andrehatlo.github.io

    If not, there is possibly something wrong with your repository or github setup.



    사용자 지정 도메인 적용


    Custom domain 아래에 GitHub Pages가 보일 때까지 github repo 설정 페이지에서 아래로 스크롤합니다.

    도메인 이름을 입력하고 저장을 클릭합니다.

    이제 도메인 호스팅 업체 웹사이트로 이동하여 리포지토리를 가리키는 CNAME 레코드를 만듭니다. 이는 DNS 레코드 설정에서 수행할 수 있습니다.

        www.andrehatlo.com ->  CNAME -> <github-username>.github.io
    


    이제 무료로 호스팅되는 나만의 도메인이 있어야 합니다.



    웹 사이트를 계속 조정하고 다양한 테마를 모두 확인하십시오! 앞으로 Jekyll에 대한 더 많은 튜토리얼로 찾아오겠습니다 😄

    이것이 내 첫 번째 블로그 게시물로 충분히 도움이 되었기를 바랍니다.



    나는 더 많이 더 많이 작성하여 가능한 한 빨리 뛰어나도록 노력할 것입니다! 👋 👋

    좋은 웹페이지 즐겨찾기