diff --git a/FASTN.ftd b/FASTN.ftd index 1a7332e93..839e69b56 100644 --- a/FASTN.ftd +++ b/FASTN.ftd @@ -718,6 +718,8 @@ skip: true - Dynamic Hosting: - Heroku: /heroku/ document: deploy/heroku.ftd +- Set up your domain: + document: workshop/domain-setup.ftd ## Design: /figma/ document: cs/ftd-to-figma.ftd diff --git a/content-library/index.ftd b/content-library/index.ftd index dbc782781..d023b475f 100644 --- a/content-library/index.ftd +++ b/content-library/index.ftd @@ -20,7 +20,102 @@ $processor$: pr.full-sitemap -- integer max-width: 1120 +-- component: create-site-using-fastn-template +-- ds.markdown: + +Let’s understand fastn project creation in just 5 minutes by playing! + +With this we are also going to create our new FTD website by following the very +short embedded tutorial. + +Do you have a GitHub account? + +Log-in with [GitHub.com](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fsign-in) into your GitHub account. + +Or + +Create your GitHub account by following simple steps by the +[GitHub sign-up process](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home). + +Now as you signed into your GitHub account, lets start creating our first fastn +website project on GitHub. + +To start with it, create a repository using fastn-template - [Click here](https://github.com/ftd-lang/fastn-template/generate) + + +-- ds.image: Figure 3: How to create new repository using fastn-template +src: $fastn-assets.files.images.blog.figure-3.png +width: fill-container + + +-- ds.markdown: + +Click on Public to make your FTD website visible to public. You can click on +Private in-case you want to keep it private. We recommend keeping the Public +selected. + +You can also add a description of your FTD website(optional). + + +Once you click on Create repository from template your first ever FTD web +repository is ready. + + +-- ds.image: Figure 4: Creating GitHub repository using fastn-template +src: $fastn-assets.files.images.blog.figure-4.png +width: fill-container + + +-- ds.markdown: + +Edit your repository README.md file and remove default content from it. + +Follow below steps to make your first `FTD` web-site live. + +- Click on `Actions` tab and check for green tick, if +{$ds.greenmarker: Update README.md} workflow ran successfully. + + +-- ds.image: Figure 5: Creating GitHub repository using fastn-template +src: $fastn-assets.files.images.blog.figure-5.png +width: fill-container + + +-- ds.markdown: + +- Click on `Settings` tab and follow `Step-1` to `Step-5` shown in below image: + + +-- ds.image: Figure 6: On ⚙️ `Settings` tab follow Step-1 to Step-5 +src: $fastn-assets.files.images.blog.figure-6.png +width: fill-container + + +-- ds.markdown: + +- Click on `Actions` tab and check for green tick, if `pages build and +deployment` workflow ran successfully. + + + +-- ds.image: Figure 7: {$ds.greenmarker: pages build and deployment} workflow should run successfully +src: $fastn-assets.files.images.blog.figure-7.png +width: fill-container + + +-- ds.markdown: + +Once {$ds.greenmarker: pages build and deployment} ran successfully. Your first +`FTD` website is live. + +To see your live website click on `Settings` tab and follow below steps: + +-- ds.image: Figure 8: On ⚙️ {$ds.greenmarker:Settings} → {$ds.greenmarker:Pages} → click on {$ds.greenmarker: Visit site} button +src: $fastn-assets.files.images.blog.figure-8.png +width: fill-container + +-- end: create-site-using-fastn-template -- component display-testimonial-card: diff --git a/workshop/domain-setup.ftd b/workshop/domain-setup.ftd new file mode 100644 index 000000000..7ab62353c --- /dev/null +++ b/workshop/domain-setup.ftd @@ -0,0 +1,190 @@ +-- import: fastn.dev/assets +-- import: fastn.com/content-library as cl + +-- ds.page: FASTN & FTD Domain Setup + +Follow this documentation to setup your FASTN & FTD domain. + + +-- ds.h2: 1: Registering your domain on [Godaddy.com](https://www.godaddy.com/) +;;id: step-1 + +To register your domain on [Godaddy.com](https://www.godaddy.com/) you need to +register with Godaddy.com, if you are not registered. If you are already +registered then login to your account and shop for your domain. + +- Registered user click on this link to Sign-In: https://sso.godaddy.com/ +- Non Registered user click this link to Sign-Up: https://sso.godaddy.com/account/create + +Once you are Signed-In then search for your desired domain name: + + +-- ds.image: Figure 1: Search for your desired domain +src: $fastn-assets.files.images.blog.figure-1.png +width: fill-container + + +-- ds.markdown: + +For e.g. you want to register your domain name as jonhywalker.com type +`jonhywalker.com` into the above input field and click on Search Domain button. + +If `jonhywalker.com` is available for registration then it will show below screen: + + +-- ds.image: Figure 2: Search for your desired domain +src: $fastn-assets.files.images.blog.figure-2.png +width: fill-container + +-- ds.h2: 2: GitHub repository +;;id: step-2 + +-- cl.create-site-using-fastn-template: + +-- ds.h2: 3: GitHub repository link to Godaddy website + +We have already registered your domain using Godaddy.com. Let’s link your GitHub +repository with your website by adding DNS(Domain Name System) configurations +to it. + +Follow below steps to add DNS configurations: + +- Visit GitHub documentation to update DNS configurations. [Click here to open](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain). + +- Goto Step No. 5 - Keep this documentation open in browser tab + +- Switch to new tab OR goto Godaddy.com account dashboard and follow below steps: + +- Click on your user name and select {$ds.greenmarker: My Products} link from the dropdown menu. + +-- ds.image: Figure 9: Click on DNS button +src: $fastn-assets.files.images.blog.figure-9.png +width: fill-container + + +-- ds.markdown: + +Or + +- Change your .com domain name from below url: https://dcc.godaddy.com/manage/{$ds.greenmarker: jonhywalker.com}/dns + +And open it in browser tab you should see below screen: + + +-- ds.image: Figure 10: Click on Add button +src: $fastn-assets.files.images.blog.figure-10.png +width: fill-container + + +-- ds.markdown: + +- Click on Add button below box will appear on screen. Click on Type and select A +from the dropdown menu. As shown in Step 1 and Step 2 + + +-- ds.image: Figure 11: Follow Step 1 and Step 2 +src: $fastn-assets.files.images.blog.figure-11.png +width: fill-container + + +-- ds.markdown: + +- In Name field type @ + +- In Value enter 185.199.108.153 ip address([refer Step No.2 from this document](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain)) + +- In TTL click on dropdown and select custom option and enter value {$ds.greenmarker: 600} + +-- ds.image: Figure 12: Follow Step 1 to Step 6 +src: $fastn-assets.files.images.blog.figure-12.png +width: fill-container + + +-- ds.markdown: + +- Add all 4 IPs A records mentioned in GitHub documentation ([refer Step No.2 from this document](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain)) + +185.199.108.153 +185.199.109.153 +185.199.110.153 +185.199.111.153 + +- Repeat Step 7 to Step 10 from this document. + +- Once you add all four A record IP addresses. Then start adding AAAA records + +2606:50c0:8000::153 +2606:50c0:8001::153 +2606:50c0:8002::153 +2606:50c0:8003::153 + +- Repeat Step 7 to Step 10 from this document. And select AAAA record instead of +A record. + +- Editing CNAME record: on same screen you will find CNAME record click on edit icon + + +-- ds.image: Figure 13: Click on edit icon +src: $fastn-assets.files.images.blog.figure-13.png +width: fill-container + + +-- ds.markdown: + +- You will see below CNAME record box opened for editing + + +-- ds.image: Figure 14: Click on Save button +src: $fastn-assets.files.images.blog.figure-14.png +width: fill-container + + +-- ds.markdown: + +- Update Value as shown in above image and click on save. CNAME value is always +your GitHub username and github.io + +- So if your GitHub username is johnywalker75 then your CNAME value will be {$ds.greenmarker: johnywalker75.github.io} + +- Your Godaddy domain configuration is ready. + +- Goto your GitHub repository and click on Add file dropdown and select Create new file, + + +-- ds.image: Figure 15: Follow Step 1 and Step 2 +src: $fastn-assets.files.images.blog.figure-15.png +width: fill-container + + +-- ds.markdown: + +- Enter filename as CNAME (without any extension) + +-- ds.image: Figure 16: Creating CNAME file +src: $fastn-assets.files.images.blog.figure-16.png +width: fill-container + + + +-- ds.markdown: + +- Click on Commit new file button. CNAME file will be created on your repository +root directory. + +- Click on {$ds.greenmarker: ⚙️ Settings} and select Pages link from left sidebar. Scroll down to Custom domain section and add your domain name into custom domain input box, + + +-- ds.image: Figure 17: Follow Step 1 and Step 2 +src: $fastn-assets.files.images.blog.figure-17.png +width: fill-container + + +-- ds.markdown: + +- Click on Save button and Once DNS check is done you can click to enforce HTTPS +for your domain. + + +Congratulations! your `www.johnywalker.com` domain is now public live. + +-- end: ds.page diff --git a/workshop/learn.ftd b/workshop/learn.ftd index d211af94d..8303660c0 100644 --- a/workshop/learn.ftd +++ b/workshop/learn.ftd @@ -55,6 +55,7 @@ offered to the students to acknowledge their competance in `fastn-stack`. - **Static hosting on GitHub pages:** Learn to [publish static site on GitHub Pages](/github-pages/) - **Static hosting on Vercel:** Learn to [publish static site On Vercel](/vercel/) - **Dynamic hosting:** Learn [deploying on Heroku](/heroku/) +- **Setup your domain:** Learn how to [setup a domain](/workshop/domain-setup/) for your website. ;; -- ds.h1: Other Resources