Add a PDF file in Gatsby - reactjs

Question

Pretty new to Gatsby here, and trying to build my portfolio pour profesional purpose. One issue tho: I'm not sure of the different steps to take on how to add a pdf file in a specific page (and on click, the user can consult it on another tab). Here is my repo link: https://github.com/chrisnopa/new_portfolio/tree/master/cdn
Let's say I wanna add my resume on the "about" page:
import React from 'react'
import Layout from '../components/layout/layout'
import SecImg1 from '../images/about/sticky.jpg'
import SecImg2 from '../images/about/uxui.jpg'
const About = () => (
<Layout>
<section className="section-double">
<div className="section-content">
<h3>A propos</h3>
<h2>Résolution & méthode</h2>
{/* <a
class="btn"
href="/cv-français.pdf"
download="cv-français.pdf"
target="_blank"
>
<span>
<span>
<span>Consulter mon CV</span>
</span>
</span>
</a> */}
<p>
J’apprécie l'idée de prendre quelque chose de complexe et de le
décomposer en parties plus digestes, et surtout plus intelligibles.
Comprendre les variables en jeu et travailler sur la solution. J' ai
eu une brève vie en tant que responsable de production dans
l’audiovisuel et j'ai découvert assez que ce n'était pas le genre de
problèmes qui m'intéressaient. Par la suite, je me suis lancé dans la
<span id="fancy-word"> gestion de projets digitaux</span> pour différentes
entités.
</p>
<p>
Le tournant est venu lorsque j'ai découvert l'UX et les processus structurés de conception
<span id="fancy-word"> tournée vers et avec l'utilisateur</span>.
</p>
<p>
<strong id="fancy-word">CV COMING SOON</strong>
</p>
</div>
<div className="section-img">
<img src={SecImg1} alt="UX/UI" />
</div>
</section>
<section className="section-double section-reverse">
<div className="section-content">
<h3>Vision du design</h3>
<h2>Comprendre & itérer</h2>
<p>
Je crois qu'accepter de passer du temps à examiner le problème, c'est
déjà être en train de le résoudre. Essayer de comprendre quoi, quand, comment et surtout pourquoi est pour moi le meilleur indicateur design, celui de l'utilité.
</p>
</div>
<div className="section-img">
<img src={SecImg2} alt="UX/UI" />
</div>
</section>
</Layout>
)
export default About
How could I do it? I'v seen this code sample on Stack, tried it but didn't work:
import React from "react"
import downloadFile from '../downloads/file.pdf'
const IndexPage = () => (
<>
<a href={downloadFile} download>Download the imported file</a>{` `}
<a href={`download.pdf`} download>Download the file from the static folder</a>
</>
)
export default IndexPage
If anyone knows how to add a quick fix on this, it would be gladly appreciated!

Answer 1

Did you create a static folder in your project root and added that PDF there? If so, that file will be copied on build to /src/public/static and you will be able to link to it using:
Download the file from the static folder
Having said that, I think the better way is to query for the file in combination with gatsby-source-filesystem as described here.