Git Product home page Git Product logo

week-4-marisiman's Introduction

Review Assignment Due Date

Iman Maris-Weekly Assignments - Week 4

Weekly Assignments - Week 4

Contains about the weekly tasks of the revou course has a goal to learn some new knowledge about software engineering. The fourth week's assignment contains :

  1. How to deploy a website things that will built and deploy on netlify.
  2. The deployment must be auto deploy from project main branch using github.
  3. Custom domain must be connected
  4. Documented the steps and process on a readme

About my Website

I'm newbie about this but i will try to create a my personal website assignment. The topic of my website contains about sales of spices and other things related to herbs.

Website Layout

My website layout consists of :

  • Navigasi bar
  • Heading
  • Main yang berisi display, list picture, how to use, and form address
  • footer

Usage

The main files and directories in the project can you customize,

  • index.html
  • style.css

your suggestions, feedback and input are very useful for my knowledge about this..


Documentation of Stages and Processes

Contains the stages of the process from start to finish

About Buy Domain

Domain purchase at Niagahoster, following are the steps for the purchase..

  • Open website niagahoster
  • Check the desired domain name, is it still available? If still available, then press "pilih" check desire domain

  • Checklist the added domain names and continue. checklist and select buyer methode

  • If you haven't logged into Niagahoster, you can log in or register first login first

  • If already logged in, the menu will return to the payment method display. Can directly select Checkout now checkout after login

  • Complete your personal data to continue payment and select agree "setuju" completed personal data

  • Next will come out the total purchase invoice purchase invoice

  • After making a payment, wait until the payment is verified payment is verified

Deployment Process

Pull Request and Merge

Open the folder you want to do a pull request, and open github in there. Then, make a new branch.

make a new branch

Activate a new branch, from branch "main" to "develop".

activated new branch

And push to github.

push to github

This is the result

result push to github

After being pushed, do an edit to see the changes. Then do the following steps on git bash.

add modified and commit

After being commit in new branch, than click "compare & pull request".

compare and pull request

Then write a description as an introduction to the pull request.

description as an intro to the pull

And create a pull request

create pull request

And click "Merge Pull Request"

merge pull request

Click "Confirm Merge"

confirm merge

And the pull request and merge process was successful.

succesfull merge

--

Prepare File and Push to Github

Before going on to the steps for deploying a static website to netlify, first prepare the website files and push them to github. Then create a new repository on github to hold the files you just created.

push process with gitbush

After the html file is ready and the repository on Github has been created, now we push the file to the repository that was created on Github using the basic git command as shown above.

after push in github

Deployment Static Website with Netlify

Step 1: Create Account

Register or sign in first

front display in netlify

Please select a registration method to use, I will sign in using GitHub

sign in with github

After success, you will be redirected to the Netlify dashboard.

after sucsess sign in with github

--

Step 2: Add a New Project

Then it will be redirected to an overview page as shown below. Please click the "add new site" button then select "import an existing project"

add new site with github

In this second step, please click the button "deploy with github"

deploy  with github

--

Step 3: Authorized

After selecting github, wait for the authorization process

next step is authorized

--

Step 4: Select Your Repository

Next, select the repository on github that you want to deploy to the new site on netlify,

choose account github to deploy in netlify

and choose your project to deploy.

choose project to deploy

--

Step 5: Configure

Then in the configuration or site setting step, please adjust it to your website's source code.

cofigure process

After clicking Deploy Site, wait until the deploy process is complete. If the deploy process is complete, the static website can be accessed.

done access

--

Step 6: Change Site Name

Default site name from netlify can be changed by editing site name.

domain setting to edit site name

Then, edit and customize the site name you want. And click "save"

edit and change name site

Final result looks like this

the end result looks like this


Connect to Domain and DNS

Prepare Domain and Website Static from Netlify

Before the connection process, it is necessary to prepare a paid custom domain first.

domain custom

--

Content Delivery Network Use Cloudflare

Step 1: Connect to Cloudflare

Open website Cloudflare and sign in there. If complete your account, can click "apply"

sign in at cloudflare

Then, click "Add a website or application".

Add a website

Then write down the domain name that has been prepared, and then click "add site".

input domain in cloudflare

After that several service options will be provided, select free for those that are not paid. Then click "continue.

choose free session

Waiting for scanning..

scanning site in cloudflare

Than select "continue" and select "confirm".

next display after choose free session

--

Step 2: Colaboration to Update Name Server

Open the Niagahoster website and log in. Then click "kelola layanan".

update name server1

Next choose "Ubah Nameserver" in overview domain.

update name server2

Open cloudflare and click "overview menu", then add cloudflare nameserver with copy to paste in update nameserver niagahoster. Then click "Simpan"

paste name saver from cloudflare

Done, check name server. Then go to "Quick Start Guide".

done check name server

Set according to the number in the instructions below. Then click "Finish"

Setting at start guide

Wait for nameserver verification approximately 10 minutes, and Don't forget to log out after this.

verificated nameserver

After ± 10 minutes, please log in your account on cloudflare. If nameserver is active, marked as shown below. And click on the notification.

nameserver active

--

Step 3: Configuration Domain to Connect Netlify

Choose type "CNAME"

identification server

Then, copy your nameserver domain in netlify.

copied nameserver netlify

Then, paste to "target" in cloudflare.

paste nameserver to cloudflare

And add "@" to name "required" in cloudflare. Then click "save"

input @ in name cloudflare

Nameservers already saved,

already saved

--

Step 4: Finally

Contains about the end of the domain linking, then add domain in netlify and write your domain custom name.

add domain in netlify

And wait verified process, then click "add domain"

add domain verified

and finally custom domain can be accessed..

finnaly process

following domain name, if interested can be accessed here imanmaris.site

final display from custom domain


Thanks a lot *copyright © 2023 Iman*

week-4-marisiman's People

Contributors

marisiman avatar github-classroom[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.