After downloading the react files you will get three folder.
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.
Now we need to open command line in the “fastland-starter-template” directory and install yarn by running the command
yarn in the
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:
→ 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)
Now we need to open the command line in this directory and start the yarn by typing “yarn start” in the command line.
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.
If you see the following set of instructions that means the yarn has started successfully:
Now if you open your browser and go to http://localhost:8000, you will see something like this :
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:
Now the section components we selected and copied before, we need to import them in “index.js” in the following manner:
Refresh http://localhost:8000 in your browser and you’ll see output like this:
Import the other sections in the same procedure. Finally the code will look something like this:
and the output will be:
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:
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 :
The fixed path will be like this in our case:
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.
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!