How to Create Your own Landing


Step 1:

After downloading the react files you will get three folder.

image

We will need to work on two folders for our task. First, the main theme folder named fastland-v1 to select and copy the section components from, and then, the fastland-starter-template for creating a custom landing based on your selection of section components devoid of any extra code.

Step 2:

Now we need to open command line in the “fastland-starter-template” directory and install yarn by running the command yarn in the cmd.

image

Step 3:

After installing Yarn in our fastland-starter-template directory we have to choose the sections we want in our landing template.


To take our desired section component, we will have to go to the fastland-v1/src/sections directory and simply copy the sections. Then we need navigate to fastland-starter-template/src/sections directory and paste the sections there.


For example, we have chosen the sections for our case you can see below:

image

→ these sections are selected from:

  • “fastland-v1/src/sections/services/Hero” (Hero section from Service Landing)
  • “fastland-v1/src/sections/it/Services” (Service section from IT Landing)
  • “fastland-v1/src/sections/marketing/ContentOne” (Content One section from Marketing Landing)
  • “fastland-v1/src/sections/marketing/ContentTwo” (Content Two section from Marketing Landing)
  • “fastland-v1/src/sections/it/Contact” (Contact section from it Landing)
  • “fastland-v1/src/sections/agency/Pricing” (Pricing section from Agency Landing)

Step 4:

Now we need to open the command line in this directory and start the yarn by typing “yarn start” in the command line.

image

Note: You may notice some warning saying “could not find image” and [gatsby-plugin-image] Could not read image data because the image paths are mismatched. Donut worry! We will show you on step-8 how to fix that. Though it won’t cause any issue to starting our app.

Step 5:

If you see the following set of instructions that means the yarn has started successfully:

image

Now if you open your browser and go to http://localhost:8000, you will see something like this :

image

Step 6:

We have to open fastland-starter-template in our favourite text editor now and open src/pages/index.js You will see some pre-written code like below:

image

Step 7:

Now the section components we selected and copied before, we need to import them in “index.js” in the following manner:

image

Refresh http://localhost:8000 in your browser and you’ll see output like this:

image

Import the other sections in the same procedure. Finally the code will look something like this:

image

and the output will be:

image

Step 8:

Now we will fix those missing image warning as promised in step-4. In order to do that, we need to identify the components in which the images are missing. to identify the component we need to look into the cmd terminal or the browser console:

image

or

image

Open the identified component and fix the image paths. As all images are in src/assets/image/ and the plugin gatsby-plugin-image’s Static image component doesn’t support the absolute path, we need to use relative path here :

image

The fixed path will be like this in our case:

image

Continue the same process for other component’s image path. Save and refresh browser. You won’t see warning in console for image now and the missing images will be found.

image

Bingo! you have successfully created your custom landing. Moving on to final step of getting publish/build folder.

Final Step: Generating production build

Running the command yarn build will generate production build of the page. You will see a folder named public in fastland-starter-template’s root directory. Use that folder for production. You now have a unique custom landing of your choice. Enjoy!