{"componentChunkName":"component---src-templates-blog-template-js","path":"/How-I-deployed-my-portfolio","result":{"data":{"markdownRemark":{"html":"

1. Introduction

\n

Hi,\nthis a simple note to remember how i deployed my personal portfolio.

\n

2. Why I chose this solution

\n

I decided to develop my personal portfolio using GatsbyJs mainly for these reasons:

\n\n

3. Let's prepare everything

\n

To be as clear as possible I decided to write an ordered list.

\n
    \n
  1. Download GIT from here
    2. \n
  2. Download Nodejs here
    3. \n
  3. Install GIT
    4. \n
  4. Install Nodejs
    5. \n
  5. Create a folder where you prefer
    6. \n
  6. Right Clik and select GIT Bash Here
    7. \n
  7. Find your favourite template on the official website and save the url written under the picture of the project
    8. \n
  8. Create e new public repository in Github following this path <yourUsername>.github.io and copy the url of the project
    9. \n
  9. Follow these commands in order
    10. \n
\n

4. Follow these simple commands

\n
    \n
  1. \n

    gatsby new <nomeProgetto> <urlDelTemplateScelto>

    \n
    \n

    This will create a folder named nomeProgetto with a lot of files needed for your websites

    \n
    \n
    2. \n
  2. \n

    cd <nomeProgetto> Remember to change with the name of the project that you have chosen before

    \n
    \n

    This will change the working directory of the program

    \n
    \n
    3. \n
  3. git remote remove origin generally is not neded but anyway to prevent problems launch it
    4. \n
  4. \n

    git remote add origin <urlOfYourGithubProject>

    \n
    \n

    This command is very important because it will connect your local website with the cloud. Check that the url is right typing git remote -v

    \n
    \n
    5. \n
  5. git branch -m develop
    6. \n
\n
\n

With this command we are creating a branch to store our \"developing\" files, in the other branch there will be the website

\n
\n
    \n
  1. git push -u origin develop With this command we are going to save our building file
    2. \n
  2. npm install gh-pages --save-dev This is the command used to install the plugin that will \"send\" your website to github cloud
    3. \n
  3. Now we need to edit the file named package.json adding this line inside of the group scripts. At the end you will have something like this
    4. \n
\n
{\n[...other code...]\n  \"scripts\": {\n    \"deploy\": \"gatsby build && gh-pages -d public -b master\"\n    [...other code...]\n  }\n  [...other code...]\n}
\n
    \n
  1. npm run deploy to send your website in the cloud
    2. \n
\n

#5. Other useful commands\nRemember to open GIT bash directly in the folder of your project

\n","frontmatter":{"date":"February 20, 2020","path":"/How-I-deployed-my-portfolio","title":"How I deployed my portfolio","thumbnail":"assets/MyPortfolio.webp","metaDescription":"How I deployed my portfolio"}}},"pageContext":{}},"staticQueryHashes":["3159585216"]}